jquery事件气泡不起作用

我想我理解事件气泡，但当我把下面的代码付诸实践时，它似乎不起作用。当我预计它们会继续超过跨度级别时，警报会停止。如果有人能指出我错过了什么，我会很感激。但我有更大的困惑（至少对我来说）。事件泡沫的意义何在？在我看来，事件气泡不应该是默认的，而应该是一个打开它的选项。有人能给我一个当自动事件气泡有用时的例子吗？（请指出事件气泡是否默认未打开，从而解释为什么我的代码没有得到我期望的结果）。

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

  <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>

事件气泡，而不是绑定到事件的函数。事件实际上是冒泡的，但父元素没有任何绑定到它们的内容，只有跨度。

这把小提琴展示了事件是如何冒泡的。警报会弹出两次，因为有实际点击的跨度，然后是层次结构中的另一个跨度。事件是在div上触发的，但是div没有绑定到事件的处理程序。

HTML:

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

JavaScript:

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

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

下面是另一个显示停止冒泡的示例

相关内容

最新更新

热门标签：