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

【问题标题】：Is it a bad idea to capture all click events in a single global event handler?在单个全局事件处理程序中捕获所有点击事件是一个坏主意吗？
【发布时间】：2014-09-23 01:48:44
【问题描述】：

我有一个项目，其中包含数百个附加到各种 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;

我已经开始实现这个，我发现它提高了可读性和可维护性，但在我走得太远之前，我想知道是否有一些主要的缺点或原因导致这种范式不被更常用。例如，具有数百个 case 的 switch/case 是否会对性能造成巨大的拖累？

【问题讨论】：

标签： javascript javascript-events event-handling

【解决方案1】：

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

另外，也很难完美实现，比如考虑一下这个标记...

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

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

当然，对于本例，您可以将id 放在span 上，但希望我要说明的重点很清楚。

【讨论】：