js點(diǎn)擊事件的執(zhí)行過程實(shí)例分析【冒泡與捕獲】
本文實(shí)例講述了js點(diǎn)擊事件的執(zhí)行過程。分享給大家供大家參考，具體如下：
js事件對象event包括很多事件類型，這里用onclick事件為例，探討一下在js事件捕獲機(jī)制和冒泡機(jī)制下的執(zhí)行過程，以及如何阻止事件的捕獲和冒泡。
首先看下當(dāng)我們點(diǎn)擊一個(gè)元素后，瀏覽器的執(zhí)行過程。
1，當(dāng)某個(gè)元素綁定的事件被觸發(fā)時(shí)，這時(shí)瀏覽器就會(huì)從頂級(jí)document元素發(fā)出一個(gè)事件流
2，這個(gè)事件流順著dom層級(jí)，一層一層向下找，直到遇到了觸發(fā)事件的目標(biāo)元素，這個(gè)查找的過程是捕獲階段
說明：捕獲階段，在查找每一層dom時(shí)，遇到相同的事件默認(rèn)不執(zhí)行，元素的事件默認(rèn)在冒泡階段執(zhí)行
3，到達(dá)目標(biāo)元素后會(huì)觸發(fā)目標(biāo)元素綁定的事件函數(shù)，也就是目標(biāo)元素事件函數(shù)處理階段
4，在處理過目標(biāo)元素事件后，在順著dom層級(jí)一層一層向上查找，這時(shí)對應(yīng)dom上如果有相同的事件，默認(rèn)會(huì)被觸發(fā)，冒泡階段
實(shí)例：
<!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有三個(gè)參數(shù)，最后一個(gè)參數(shù)是決定元素事件的觸發(fā)階段，默認(rèn)是false，在冒泡階段執(zhí)行，設(shè)置為true,則在捕獲階段執(zhí)行。
在dom上直接綁定的事件會(huì)在addEventListenter監(jiān)聽的事件執(zhí)行之后執(zhí)行。
阻止冒泡：
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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. Java 基于UDP協(xié)議實(shí)現(xiàn)消息發(fā)送3. Python編寫nmap掃描工具4. php5.6不能擴(kuò)展redis.so的解決方法5. python 爬取嗶哩嗶哩up主信息和投稿視頻6. 關(guān)于HTML5的img標(biāo)簽7. python 如何停止一個(gè)死循環(huán)的線程8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效9. ASP.NET MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值10. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總
網(wǎng)公網(wǎng)安備