生活随笔
收集整理的這篇文章主要介紹了
DOM事件流
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
DOM事件流包括三個階段。
1. 事件捕獲階段
事件對象會隨著DOM事件流從Window依次向下，最終傳遞給事件目標。但是在這個過程開始之前，事件對象的傳遞路徑需要先被確定下來。
當事件發(fā)生時，首先發(fā)生的是事件捕獲，為父元素截獲事件提供了機會。
(addEventListener最后一個參數(shù)，為true則代表使用事件捕獲模式，false則表示使用事件冒泡模式。)
window.addEventListener('click', function() {console.log('4. You click window');
}, true);
2.處于目標與事件冒泡階段
事件到了具體元素時，在具體元素上發(fā)生，并且被看成冒泡階段的一部分。
隨后，冒泡階段發(fā)生，事件開始冒泡。
3.事件冒泡階段
事件冒泡即事件開始時，由最具體的目標元素接收（也就是事件發(fā)生所在的節(jié)點），然后逐級傳播到較為不具體的節(jié)點。
事件冒泡過程，是可以被阻止的 e.stopPropagation()。
button.addEventListener('click', function(event) {// event為事件對象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>
當點擊了outer時，依次打印：捕獲outer，冒泡outer。
當點擊了center時，依次打印：捕獲outer，捕獲center，冒泡center，冒泡outer。
當點擊了inner時，依次打印：捕獲outer，捕獲center，捕獲inner,冒泡inner，冒泡center，冒泡outer。
但是把最后的冒泡inner事件寫到捕獲inner事件之前，依次打印：捕獲outer，捕獲center，冒泡inner，捕獲inner，冒泡center，冒泡outer。
由此可以得出來結(jié)論，點擊了目標節(jié)點后，捕獲階段里事件會從外向目標傳遞；到了目標階段，捕獲和冒泡的執(zhí)行順序按照事件被定義的先后順序執(zhí)行；最后冒泡階段，又會由目標向外進行傳遞。
總結(jié)
以上是生活随笔為你收集整理的DOM事件流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
