生活随笔
收集整理的這篇文章主要介紹了
DOM事件流
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
DOM事件流包括三個(gè)階段。
1. 事件捕獲階段
事件對(duì)象會(huì)隨著DOM事件流從Window依次向下，最終傳遞給事件目標(biāo)。但是在這個(gè)過程開始之前，事件對(duì)象的傳遞路徑需要先被確定下來。
當(dāng)事件發(fā)生時(shí)，首先發(fā)生的是事件捕獲，為父元素截獲事件提供了機(jī)會(huì)。
(addEventListener最后一個(gè)參數(shù)，為true則代表使用事件捕獲模式，false則表示使用事件冒泡模式。)
window.addEventListener('click', function() {console.log('4. You click window');
}, true);
2.處于目標(biāo)與事件冒泡階段
事件到了具體元素時(shí)，在具體元素上發(fā)生，并且被看成冒泡階段的一部分。
隨后，冒泡階段發(fā)生，事件開始冒泡。
3.事件冒泡階段
事件冒泡即事件開始時(shí)，由最具體的目標(biāo)元素接收（也就是事件發(fā)生所在的節(jié)點(diǎn)），然后逐級(jí)傳播到較為不具體的節(jié)點(diǎn)。
事件冒泡過程，是可以被阻止的 e.stopPropagation()。
button.addEventListener('click', function(event) {// event為事件對(duì)象console.log('1. You click Button');event.stopPropagation();console.log('Stop Propagation!');
}, false);
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>div{positon: absolute;top: 0;left: 0;}.outer{width: 400px;height: 400px;background-color: red;}.center{width: 300px;height: 300px;background-color: purple;}.inner{width: 200px;height: 200px;background-color: green;}
</style>
<body>
<div class="outer"><div class="center"><div class="inner"></div></div>
</div>
<script>var oOuter = document.getElementsByClassName('outer')[0];var oCenter = document.getElementsByClassName('center')[0];var oInner = document.getElementsByClassName('inner')[0];oOuter.addEventListener('click', function(){console.log('捕獲outer');}, true);oCenter.addEventListener('click', function(){console.log('捕獲center');}, true);oInner.addEventListener('click', function(){console.log('捕獲inner');}, true);oOuter.addEventListener('click', function(){console.log('冒泡outer');}, false);oCenter.addEventListener('click', function(){console.log('冒泡center');}, false);oInner.addEventListener('click', function(){console.log('冒泡inner');}, false);
</script>
</body>
</html>
當(dāng)點(diǎn)擊了outer時(shí)，依次打印：捕獲outer，冒泡outer。
當(dāng)點(diǎn)擊了center時(shí)，依次打印：捕獲outer，捕獲center，冒泡center，冒泡outer。
當(dāng)點(diǎn)擊了inner時(shí)，依次打印：捕獲outer，捕獲center，捕獲inner,冒泡inner，冒泡center，冒泡outer。
但是把最后的冒泡inner事件寫到捕獲inner事件之前，依次打印：捕獲outer，捕獲center，冒泡inner，捕獲inner，冒泡center，冒泡outer。
由此可以得出來結(jié)論，點(diǎn)擊了目標(biāo)節(jié)點(diǎn)后，捕獲階段里事件會(huì)從外向目標(biāo)傳遞；到了目標(biāo)階段，捕獲和冒泡的執(zhí)行順序按照事件被定義的先后順序執(zhí)行；最后冒泡階段，又會(huì)由目標(biāo)向外進(jìn)行傳遞。
總結(jié)
以上是生活随笔為你收集整理的DOM事件流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
