簡(jiǎn)單理解：

事件冒泡：頁面上有這么一個(gè)節(jié)點(diǎn)樹，div>ul>li>a;比如給最里面的a加一個(gè)click點(diǎn)擊事件，那么這個(gè)事件就會(huì)一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，即自下而上觸發(fā)事件。

事件捕獲:?跟上面的正好相反，自上而下觸發(fā)事件，也就是從外到里。

示例：

<ul id="ul1"><li id="li1">111</li><li>222</li><li>333</li><li>444</li> </ul>

綁定事件：

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

現(xiàn)在去點(diǎn)擊111那行，執(zhí)行結(jié)果是：

li事件被觸發(fā)，li1 ul事件被觸發(fā)，ul1

很明顯是事件冒泡，自下而上，從里向外觸發(fā)事件。

要注意：綁定事件方法有3個(gè)參數(shù)，第三個(gè)參數(shù)就是控制事件觸發(fā)順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認(rèn)false,即事件冒泡。

改變參數(shù)，測(cè)試事件捕獲：

document.getElementById("ul1").addEventListener("click",function(e){alert("ul事件被觸發(fā)，"+this.id);},true) document.getElementById("li1").addEventListener("click",function(e){alert("li事件被觸發(fā)，"+this.id)},true)

現(xiàn)在去點(diǎn)擊111那行：

ul事件被觸發(fā)，ul1 li事件被觸發(fā)，li1

執(zhí)行結(jié)果顯示，從外向里執(zhí)行事件。

應(yīng)用：

事件委托會(huì)用到事件冒泡的原理：也就是說只需要給ul綁定事件就可以了，點(diǎn)擊li時(shí)由于冒泡機(jī)制會(huì)自己執(zhí)行ul綁定的事件，從而避免li過多，逐條綁定事件造成的性能問題

總結(jié)

以上是生活随笔為你收集整理的JS事件冒泡与事件捕获的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。