jquery事件泡沫不起作用

我認爲我理解事件泡沫，但是當我將以下代碼應用到實踐中時，它似乎不起作用。當我預計他們會繼續超越這個範圍時，警戒在範圍級別停止。如果有人可以指出我錯過了什麼，我將不勝感激。但我有更大的益智遊戲（至少對我來說）。事件泡沫的重點是什麼？感覺我覺得事件泡沫不應該是默認的，而應該是一個選項來打開它。有人可以給我一個例子當自動事件氣泡是有用的嗎？（並請指出，如果事件氣泡默認情況下不開，因此解釋了爲什麼我的代碼沒有得到我期待的結果）。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，我不想用泡法。（可能會在跨度ID擠？）。泡沫法在這種情況下會如何提供幫助？

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

來源

2015-12-22 user3502374

起泡是不是真正的有一個處理程序來處理的許多元素。它更多的是讓一個處理程序讓其他處理程序完成它們的工作。例如，您可以通過ID將事件處理程序綁定到spanOut。即使在這種情況下，仍然會發生事件冒泡，因爲事件首先會觸發divIn，然後是spanIn，最後是spanOut。 –

事件冒泡，而不是綁定到事件的函數。事件實際上是冒泡的，但父元素沒有任何綁定的東西，只有跨度。

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

來源

2015-12-22 01:21:20

謝謝。我完全明白你的例子中錯過了什麼。謝謝。我仍然需要圍繞爲什麼需要冒泡。這是因爲不是每個div或其他任何標有w/id或class的標籤？使用這種方法（泡泡），你將如何保證正確的事件被匹配和觸發？ – user3502374

我在原始文章中添加了更多示例，將我的問題包含在泡泡上 – user3502374

換句話說，在html/js世界中，是否有更多的事件需要匹配所有相似的事物（比如ALL Spans） ??我想了解爲什麼匹配所有跨度案例比找到我特別尋找的跨度更重要。 – user3502374

jquery事件泡沫不起作用

回答

相關問題