js點擊事件的執行過程實例分析【冒泡與捕獲】
本文實例講述了js點擊事件的執行過程。分享給大家供大家參考，具體如下：
js事件對象event包括很多事件類型，這里用onclick事件為例，探討一下在js事件捕獲機制和冒泡機制下的執行過程，以及如何阻止事件的捕獲和冒泡。
首先看下當我們點擊一個元素后，瀏覽器的執行過程。
1，當某個元素綁定的事件被觸發時，這時瀏覽器就會從頂級document元素發出一個事件流
2，這個事件流順著dom層級，一層一層向下找，直到遇到了觸發事件的目標元素，這個查找的過程是捕獲階段
說明：捕獲階段，在查找每一層dom時，遇到相同的事件默認不執行，元素的事件默認在冒泡階段執行
3，到達目標元素后會觸發目標元素綁定的事件函數，也就是目標元素事件函數處理階段
4，在處理過目標元素事件后，在順著dom層級一層一層向上查找，這時對應dom上如果有相同的事件，默認會被觸發，冒泡階段
實例：
<!DOCTYPE html><html lang='en'><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></head><body> <div οnclick='firstClick()'> parent <div οnclick='secondClick()'>child <div onclick = 'thirdClick()'>提交</div> </div></div><script> var divs=document.querySelectorAll('div');//獲取所有的divs function firstClick(){ alert(’firstClick’) } function secondClick(){ alert(’secondClick’) } function thirdClick(){ alert(’thirdClick’) } function fn0(){ alert('box'); } function fn1(){ alert('child'); } function fn2(){ alert('but'); } divs[0].addEventListener('click',fn0,false); divs[1].addEventListener('click',fn1,false); divs[2].addEventListener('click',fn2,false);</script></body></html>
說明：
addEventListener有三個參數，最后一個參數是決定元素事件的觸發階段，默認是false，在冒泡階段執行，設置為true,則在捕獲階段執行。
在dom上直接綁定的事件會在addEventListenter監聽的事件執行之后執行。
阻止冒泡：
onclick = function(e){ e=e||window.event; if(e.stopPropagation){ e.stopPropagation();//其它瀏覽器 }else{ e.cancelBubble=true;//IE瀏覽器 }}
阻止捕獲：判斷e.target
function fn0(e){ if(e.target == divs[0]){ alert('fn0'); }}divs[0].addEventListener('click',fn0,true);
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章：
1. React+umi+typeScript創建項目的過程2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析3. SharePoint Server 2019新特性介紹4. ASP中常用的22個FSO文件操作函數整理5. 三個不常見的 HTML5 實用新特性簡介6. ASP調用WebService轉化成JSON數據，附json.min.asp7. .Net core 的熱插拔機制的深入探索及卸載問題求救指南8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. 讀大數據量的XML文件的讀取問題10. 解決ASP中http狀態跳轉返回錯誤頁的問題
網公網安備