首頁  >  文章  >  web前端  >  JS的事件冒泡和事件捕獲(圖文教程,簡單暴力)

JS的事件冒泡和事件捕獲(圖文教程,簡單暴力)

亚连
亚连原創
2018-05-19 09:47:231640瀏覽

這篇文章主要介紹了一JS的事件冒泡和事件捕獲,通過代碼舉例詳細描述了兩者之間的差別,需要的朋友可以參考下

在學校,聽老師講解事件冒泡和事件捕捉機制的時候跟聽天書一樣,只依稀記得IE使用的是事件冒泡,其他瀏覽器則是事件捕獲。當時的我,把它當成IE瀏覽器相容問題,所以沒有深究(IE8以下版本的瀏覽器已基本退出市場)。工作至今,雖然多次遇到該類問題,但均未深究,始終一知半解,遇到了全TM靠猜(選A不行就選B唄)。今天閒來無事自己做了個demo,算是把這個問題徹底搞明白了。

先下結論:他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,也就是自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數,就是控制事件觸發順序是否為事件擷取。 true,事件捕獲;false,事件冒泡。預設false,即事件冒泡。 Jquery的e.stopPropagation會阻止冒泡,意思就是到我為止,我的爸爸和祖宗的事件就不要觸發了。

這是HTML結構

  <p id="parent">
    <p id="child" class="child"></p>
  </p>

現在我們給它們綁定上事件

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+this.id)
  })

結果:

child事件被觸發,child
parent事件被觸發,parent

結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。

現在改變第三個參數的值為true

   document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+e.target.id)
  },true)

結果:

parent事件被觸發,parent
child事件被觸發,child

結論:先parent,然後child。事件觸發順序變更為自外向內,這就是事件捕獲。

看起來沒什麼卵用,上一個利用事件冒泡的案例,反正我是經常會用到。

  <ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

需求是這樣的:滑鼠放到li上對應的li背景變灰。

利用事件冒泡實現:

  $("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

也許有人會說,我們直接給所有li都綁上事件也可以啊,一點也不麻煩,只要…

   $("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

是,這樣也行。而且從程式碼簡潔程度上,兩者是相若彷彿的。但是,前者少了一個遍歷所有li節點的操作,所以在效能上肯定是更優的。
還有就是,如果我們在綁定事件完成後,頁面又動態的載入了一些元素…

$("25edfb22a4f469ecb59f1190150159c6item7bed06894275b65c1ab86501b08a632eb"). appendTo("ul");
這時候,第二種方案,由於綁定事件的時候item7還不存在,所以為了效果,我們還要給它再綁定一次事件。而利用冒泡方案由於是給ul綁的事件…
高下立判!

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

ng-repeat渲染完成如何用AngularJS監聽

用p5.js製作煙火特效的範例程式碼_javascript技巧

JS PHP向類別動態新增方法

以上是JS的事件冒泡和事件捕獲(圖文教程,簡單暴力)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn