談起JavaScript的 事件，事件冒泡、事件捕獲、阻止默認(rèn)事件這三個(gè)話題，無(wú)論是面試還是在平時(shí)的工作中，都很難避免。
事件捕獲階段：事件從最上一級(jí)標(biāo)簽開(kāi)始往下查找，直到捕獲到事件目標(biāo)(target)。
事件冒泡階段：事件從事件目標(biāo)(target)開(kāi)始，往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽。

1、冒泡事件：

事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。通俗來(lái)講就是，就是當(dāng)設(shè)定了多個(gè)div的嵌套時(shí)；即建立了父子關(guān)系，當(dāng)父div與子div共同加入了onclick事件時(shí)，當(dāng)觸發(fā)了子div的onclick事件后，子div進(jìn)行相應(yīng)的js操作，但是父div的onclick事件同樣會(huì)被觸發(fā)。

html:

<div>
 <input type="button" value="測(cè)試事件冒泡" />
</div>

js:

  var $input = document.getElementsByTagName("input")[0];
   var $div = document.getElementsByTagName("div")[0];
   var $body = document.getElementsByTagName("body")[0];
 
   $input.onclick = function(e){
      this.style.border = "5px solid red"
      var e = e || window.e;
      alert("red")
   }
   $div.onclick = function(e){
      this.style.border = "5px solid green"
      alert("green")
   }
   $body.onclick = function(e){
      this.style.border = "5px solid yellow"
      alert("yellow")
   }

效果：依次彈出”red“,"green","yellow"。這就是事件冒泡：觸發(fā)button這個(gè)元素，卻連同父元素綁定的事件一同觸發(fā)。

2、阻止事件冒泡

如果對(duì)input的事件綁定改為：

$input.onclick = function(e){
  this.style.border = "5px solid red"
  var e = e || window.e;
  alert("red")
  e.stopPropagation();
}

這個(gè)時(shí)候只會(huì)彈出”red“，因?yàn)樽柚沽耸录芭荨?br />

3、事件捕獲：

從頂層元素到目標(biāo)元素或者從目標(biāo)元素到頂層元素，和事件冒泡是一個(gè)相反的過(guò)程。事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過(guò)必須由開(kāi)發(fā)人員特別指定)。

$input.addEventListener("click", function(){
  this.style.border = "5px solid red";
  alert("red")
}, true)
$div.addEventListener("click", function(){
  this.style.border = "5px solid green";
  alert("green")
}, true)
$body.addEventListener("click", function(){
  this.style.border = "5px solid yellow";
  alert("yellow")
}, true)

這個(gè)時(shí)候依次彈出”yellow“,"green","red"。這就是事件的捕獲。 

如果把a(bǔ)ddEventListener方法的第三個(gè)參數(shù)改成false，則表示只在冒泡的階段觸發(fā)，彈出的依次為：”red“,"green","yellow"。這是因?yàn)樵赪3C模型中，任何事件發(fā)生時(shí)，先從頂層開(kāi)始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)document。

程序員可以自己選擇綁定事件時(shí)采用事件捕獲還是事件冒泡，方法就是綁定事件時(shí)通過(guò)addEventListener函數(shù)，它有三個(gè)參數(shù)，第三個(gè)參數(shù)若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)
true=捕獲
false=冒泡

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論