溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)DOM事件流的三個(gè)階段是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
事件發(fā)生時(shí)會在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播過程即DOM事件流。
DOM事件流分為三個(gè)階段，分別為：
捕獲階段：事件從Document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的階段；
目標(biāo)階段：真正的目標(biāo)節(jié)點(diǎn)正在處理事件的階段；
冒泡階段：事件從目標(biāo)節(jié)點(diǎn)自上而下向Document節(jié)點(diǎn)傳播的階段。
捕獲階段：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style></head><body> <div> <div>son盒子</div> </div> <script> var son = document.querySelector('.son'); son.addEventListener('click', function() { console.log('son'); }, true); var father = document.querySelector('.father'); father.addEventListener('click', function() { console.log('father'); }, true); document.addEventListener('click', function() { console.log('document'); }, true); </script></body></html>控制臺輸出結(jié)果為：
可以看出捕獲階段 事件是從Document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的。
冒泡階段：
<script> var son = document.querySelector('.son'); son.addEventListener('click', function() { console.log('son'); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { console.log('father'); }, false); document.addEventListener('click', function() { console.log('document'); }) </script>控制臺輸出結(jié)果為：
可以看出冒泡階段 事件是從目標(biāo)節(jié)點(diǎn)自上而下向Document節(jié)點(diǎn)傳播的。
注意：
1、JS代碼只能執(zhí)行捕獲或者冒泡其中一個(gè)階段（要么是捕獲要么是冒泡）
2、onclick和attachEvent（ie）只能得到冒泡階段
3、addEventListener(type, listener[, useCapture]) 第三個(gè)參數(shù)如果是true，表示在事件捕獲階段調(diào)用事件處理程序；如果是false（不寫默認(rèn)是false），表示在事件冒泡階段調(diào)用事件處理程序
4、實(shí)際開發(fā)中，我們很少使用事件捕獲，我們更關(guān)注事件冒泡
5、有些事件是沒有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
6、事件的冒泡有時(shí)會帶來麻煩，不過是可以被阻止的，方法是：stopPropagation()
stopPropagation() 方法：終止事件在傳播過程的捕獲、目標(biāo)處理或冒泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。
關(guān)于“DOM事件流的三個(gè)階段是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼