欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js點(diǎn)擊事件的執(zhí)行過程實(shí)例分析【冒泡與捕獲】

 更新時(shí)間：2020年04月11日 13:34:28   作者：qdmoment  
這篇文章主要介紹了js點(diǎn)擊事件的執(zhí)行過程,結(jié)合實(shí)例形式分析了js事件機(jī)制中的冒泡與捕獲相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了js點(diǎn)擊事件的執(zhí)行過程。分享給大家供大家參考，具體如下：

js事件對(duì)象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í)對(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>

說明：

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é)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論