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

Question

我有一个项目，其中包含数百个附加到各种html项的点击事件。 我更希望将单个处理程序附加到 body 标签，该处理程序使用目标 id 上的开关/案例来确定要运行的功能。兼容现代版本的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上，但希望我想表达的观点是明确的。