js點(diǎn)擊事件的執(zhí)行過(guò)程實(shí)例分析【冒泡與捕獲】
本文實(shí)例講述了js點(diǎn)擊事件的執(zhí)行過(guò)程。分享給大家供大家參考，具體如下：
js事件對(duì)象event包括很多事件類型，這里用onclick事件為例，探討一下在js事件捕獲機(jī)制和冒泡機(jī)制下的執(zhí)行過(guò)程，以及如何阻止事件的捕獲和冒泡。
首先看下當(dāng)我們點(diǎn)擊一個(gè)元素后，瀏覽器的執(zhí)行過(guò)程。
1，當(dāng)某個(gè)元素綁定的事件被觸發(fā)時(shí)，這時(shí)瀏覽器就會(huì)從頂級(jí)document元素發(fā)出一個(gè)事件流
2，這個(gè)事件流順著dom層級(jí)，一層一層向下找，直到遇到了觸發(fā)事件的目標(biāo)元素，這個(gè)查找的過(guò)程是捕獲階段
說(shuō)明：捕獲階段，在查找每一層dom時(shí)，遇到相同的事件默認(rèn)不執(zhí)行，元素的事件默認(rèn)在冒泡階段執(zhí)行
3，到達(dá)目標(biāo)元素后會(huì)觸發(fā)目標(biāo)元素綁定的事件函數(shù)，也就是目標(biāo)元素事件函數(shù)處理階段
4，在處理過(guò)目標(biāo)元素事件后，在順著dom層級(jí)一層一層向上查找，這時(shí)對(duì)應(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 class="box" style="width:300px;height:300px;background:green;" οnclick="firstClick()">
parent
<div class="child" οnclick="secondClick()">child
<div class="button" 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>
說(shuō)明：
addEventListener有三個(gè)參數(shù)，最后一個(gè)參數(shù)是決定元素事件的觸發(fā)階段，默認(rèn)是false，在冒泡階段執(zhí)行，設(shè)置為true,則在捕獲階段執(zhí)行。
在dom上直接綁定的事件會(huì)在addEventListenter監(jiān)聽(tīng)的事件執(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測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript 中事件冒泡和事件捕獲機(jī)制的詳解
- javascript事件捕獲機(jī)制【深入分析IE和DOM中的事件模型】
- js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)
- JavaScript事件冒泡機(jī)制原理實(shí)例解析
- Javascript 事件冒泡機(jī)制詳細(xì)介紹
- javascript事件冒泡詳解和捕獲、阻止方法
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法
- JS中綁定事件順序（事件冒泡與事件捕獲區(qū)別）
- javascript事件冒泡和事件捕獲詳解
- js事件機(jī)制----捕獲與冒泡機(jī)制實(shí)例分析
相關(guān)文章
這篇文章主要介紹了JS實(shí)現(xiàn)淡入淡出圖片效果的方法,結(jié)合實(shí)例形式分析了js鼠標(biāo)響應(yīng)實(shí)現(xiàn)圖片淡入淡出效果的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
JavaScript類型轉(zhuǎn)換方法及需要注意的問(wèn)題小結(jié)(挺全面)
JavaScript類型轉(zhuǎn)換方法及需要注意的問(wèn)題，在js中經(jīng)常需要對(duì)數(shù)據(jù)類型的轉(zhuǎn)換操作，需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
js的新生代垃圾回收知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理的是關(guān)于js的新生代垃圾回收的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2019-08-08
這篇文章主要介紹了微信小程序獲取公眾號(hào)文章列表及顯示文章的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
跟我學(xué)習(xí)javascript的var預(yù)解析與函數(shù)聲明提升
跟我學(xué)習(xí)javascript的var預(yù)解析與函數(shù)聲明提升，小編對(duì)var預(yù)解析與函數(shù)聲明提升知識(shí)點(diǎn)也不甚了解，和大家一起學(xué)習(xí)本篇文章。2015-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js控制href內(nèi)容的連接內(nèi)容的變化示例
這篇文章主要介紹了使用js控制href內(nèi)容的連接內(nèi)容的變化,需要的朋友可以參考下2014-04-04
原生JavaScript實(shí)現(xiàn)Ajax異步請(qǐng)求
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實(shí)現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來(lái)使用純javascript實(shí)現(xiàn)獲取服務(wù)器端的功能來(lái)展示如何使用純javascript實(shí)現(xiàn)ajax功能，以弄清其原理.2017-11-11
解決idea開(kāi)發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問(wèn)題
這篇文章主要介紹了解決idea開(kāi)發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09