jquery 事件气泡不起作用答案

【问题标题】：jquery event bubble not workingjquery 事件气泡不起作用
【发布时间】：2016-03-28 04:46:28
【问题描述】：

我想我理解事件气泡，但是当我将下面的代码付诸实践时，它似乎不起作用。当我期望它们继续超出该范围时，警报会在跨度级别停止。如果有人能指出我所缺少的，我将不胜感激。但我有更大的谜题（至少对我来说）。事件泡沫的意义何在？在我看来，事件气泡不应该是默认设置，而应该是打开它的一个选项。有人可以给我一个 WHEN 自动事件气泡有用的例子吗？（请指出事件气泡是否默认打开，因此解释了为什么我的代码没有得到我的结果期待）。

非常感谢大家一如既往地提前！！

  <body>
     <div>
         <h1>
        <a href="#">
               <span>Hello</span>
        </a>
         </h1>
     </div>
     <script>
        //window.addEventListener("load",function(){
    //  var els = document.querySelectorAll("*");
    //  for ( var i=0; i< els.length; i++){
    //      els[i].addEventListener("click", function(){
    //      alert('click even fired on the ' + this.nodeName + '  element');
    //      });
    //       }
    //});
        $("span").click(function(){
               alert('click even fired on the ' + this.nodeName + ' element');
    });
     </script>

进一步传播，给出下面的代码，如果我只想匹配 spanOut，我不想使用气泡方法。（可能必须在上面挤入 span id？）。在这种情况下冒泡方法有什么帮助？

<span> spanOut
   <div>
       divOut
   </div>
        <span>spanIn</span>
            <div>divIn</div>
        <span>spanIn2</span>
   <div>
       divOut2
   </div>
</span>

【问题讨论】：

冒泡实际上并不是让一个处理程序来处理许多元素。更多的是让其他处理程序做他们的事情的处理程序。例如，您可以通过 ID 将事件处理程序绑定到 spanOut。即使在这种情况下，事件冒泡仍然会发生，因为事件将首先在 divIn 上触发，然后是 spanIn，最后是 spanOut。

标签： jquery propagation

【解决方案1】：

事件冒泡，而不是绑定到事件的函数。该事件实际上是冒泡的，但是父元素没有绑定任何东西，只有跨度。

This fiddle 显示事件如何冒泡。警报会弹出两次，因为存在实际单击的跨度，然后是层次结构中的另一个跨度。事件在 div 上触发，但 div 没有绑定到事件的处理程序。

HTML：

<span>
  <div>
    <span>
      hello
    </span>
  </div>
</span>

JavaScript：

$("span").click(function(){
  alert('click even fired on the ' + this.nodeName + ' element');
});

事件冒泡最有用，因为通常您不会将事件绑定到底层元素，而是绑定到树中更高的元素。如果事件没有冒泡，您的顶级元素可能永远不会收到事件触发器。

Here's another example showing stopping bubbling

【讨论】：

谢谢。我完全从你的例子中得到了我错过的东西。谢谢。我仍然需要弄清楚为什么需要冒泡。这是因为不是每个 div 或任何带有 id 或 class 的标签？使用这种方法（气泡），您将如何保证匹配和触发正确的事件？？
我在原始帖子中添加了更多示例，以包含我对气泡的问题
换句话说，在 html/js 世界中，您是否有更多事件想要匹配所有相似的事件（例如所有跨度）与匹配特定跨度？我试图理解为什么匹配所有跨度案例比找到我专门寻找的一个跨度更重要。
如果您有很多 div，并且如果您希望在单击时突出显示某些 div，那么这绝对是您不希望事情冒泡的时候。那么在这种情况下，你什么时候才能确定你想让事情冒出来呢？
Joseph Young，我接受了你的回答。感谢您坚持这一点并为我提供扩展示例。我肯定得到了传播和停止传播。谢谢你的坚持。