Question

我认为我理解事件泡沫，但是当我将下面的代码付诸实践时，它似乎并不起作用。当我希望它们继续超出时，警报会在跨度级别停止。如果有人可以指出我所缺少的东西，我将不胜感激。但我有更大的益智游戏（至少对我而言）。事件泡沫有什么意义？我觉得事件泡泡不应该是默认值，而应该是打开它的选项。有人可以给我一个 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，我不想使用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").click(function(){
  alert('click even fired on the ' + this.nodeName + ' element');
});

JavaScript的：

DECLARE @productType INT = 2
IF @productType = 1
    SELECT * FROM products1
ELSE IF @productType = 2
    SELECT * FROM products2

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

Here's another example showing stopping bubbling

jquery事件泡沫不起作用

1 个答案: