Question

我有一个项目，其中有数百个点击事件附加到各种HTML项目。我非常希望在body标签上附加一个处理程序，它使用目标id上的switch / case来确定要运行的函数。兼容现代版本的chrome，safari和firefox以及IE10 +

简化，例如

function clickHandler(e)
  {
  var T=e.target,eT=e.type;
  if(eT=="click")
    {
    switch(T.id)
      {
      case "hH": doStuff();break;
      case "hF": doDifferentStuff();break;
      case ... etc
      }
    }

document.body.onclick=clickHandler;

我已经开始实现这一点，我发现它提高了可读性和可维护性，但在我走得太远之前，我想知道是否存在一些主要的缺点或原因，为什么这种范例不常用。例如，一个包含数百个案例的开关/案例会造成巨大的性能拖累吗？

Answer 1

您希望停止传播事件的地方存在缺点。例如，实现模态的典型方法是停止在模态上传播点击，然后将事件监听器附加到document，其作用是关闭模态。如果您只在body（或一个元素）上放置事件，则这是不可能的。我可以想到其他情况，这种不灵活性也会成为障碍。

此外，很难完美地实现它，例如，考虑这个标记......

<button type="button" id="click"><span>Click me</span></button>

当用户点击时，目标元素将是span（最有可能）。这意味着当它传播到body时，您将无法匹配id属性。你可以提升寻找id的祖先元素，但那时更多工作。

当然，对于此示例，您可以将id放在span上，但希望我想说的是明确的。

捕获单个全局事件处理程序中的所有单击事件是一个坏主意吗？

1 个答案: