jquery 事件气泡不起作用

Question

我想我理解事件冒泡，但是当我将下面的代码付诸实践时，它似乎不起作用。当我希望它们继续超出该范围时，警报将停止在跨度级别。如果有人能指出我所缺少的东西，我将不胜感激。但我有更大的益智游戏（至少对我而言）。事件泡沫的意义何在？在我看来，事件气泡不应该是默认设置，而应该是打开它的一个选项。有人可以给我一个 WHEN auto event bubble is useful 的例子吗？（如果事件气泡默认情况下没有打开，请指出为什么我的代码没有得到结果我期待的）。

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

  <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，我不想使用 bubble 方法。（可能必须挤入 span id 吗？）。气泡法在这种情况下有何帮助？

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

Answer 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

jquery 事件气泡不起作用

jquery event bubble not working

jquery

propagation