一篇文章讓你徹底弄懂JS的事件冒泡和事件捕獲

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

10年積累的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有平遙免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

先上結(jié)論：他們是描述事件觸發(fā)時(shí)序問題的術(shù)語。事件捕獲指的是從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)，即自上而下的去觸發(fā)事件。相反的，事件冒泡是自下而上的去觸發(fā)事件。綁定事件方法的第三個(gè)參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認(rèn)false,即事件冒泡。Jquery的e.stopPropagation會(huì)阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發(fā)了。

這是HTML結(jié)構(gòu)

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

現(xiàn)在我們給它們綁定上事件

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被觸發(fā)，"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被觸發(fā)，"+this.id)
  })

結(jié)果：

child事件被觸發(fā)，child
parent事件被觸發(fā)，parent

結(jié)論：先child，然后parent。事件的觸發(fā)順序自內(nèi)向外，這就是事件冒泡。

現(xiàn)在改變第三個(gè)參數(shù)的值為true

　　 document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被觸發(fā)，"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被觸發(fā)，"+e.target.id)
  },true)

結(jié)果：

parent事件被觸發(fā)，parent
child事件被觸發(fā)，child

結(jié)論：先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi)，這就是事件捕獲。

貌似沒什么卵用，上一個(gè)利用事件冒泡的案例，反正我是經(jīng)常會(huì)用到。

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

需求是這樣的：鼠標(biāo)放到li上對(duì)應(yīng)的li背景變灰。

利用事件冒泡實(shí)現(xiàn)：

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

也許有人會(huì)說，我們直接給所有l(wèi)i都綁上事件也可以啊，一點(diǎn)也不麻煩，只要……

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

是，這樣也行。而且從代碼簡潔程度上，兩者是相若仿佛的。但是，前者少了一個(gè)遍歷所有l(wèi)i節(jié)點(diǎn)的操作，所以在性能上肯定是更優(yōu)的。
還有就是，如果我們?cè)诮壎ㄊ录瓿珊螅撁嬗謩?dòng)態(tài)的加載了一些元素……

$("<li>item7</li>").appendTo("ul");
這時(shí)候，第二種方案，由于綁定事件的時(shí)候item7還不存在，所以為了效果，我們還要給它再綁定一次事件。而利用冒泡方案由于是給ul綁的事件……
高下立判！

以上就是小編為大家整理的js事件冒泡事件捕獲的詳細(xì)介紹的內(nèi)容啦。希望大家繼續(xù)支持創(chuàng)新互聯(lián)~

文章標(biāo)題：一篇文章讓你徹底弄懂JS的事件冒泡和事件捕獲
文章來源：http://m.kartarina.com/article38/gecesp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、定制開發(fā)、ChatGPT、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)