[轉(zhuǎn)帖]玩轉(zhuǎn)js事件機(jī)制

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2023年5月18日 8:41 本文熱度 1127

js事件機(jī)制

正文

首先，我們要知道js事件流的概念。

一、js事件流

js事件流一共分為三個(gè)階段：

從 window上往事件觸發(fā)處傳播，遇到注冊(cè)的捕獲事件 就會(huì)觸發(fā)。
傳播到事件觸發(fā)處，觸發(fā)注冊(cè)的事件。
從事件觸發(fā)處往 window上傳播，遇到注冊(cè)的冒泡事件 觸發(fā)。

來張圖讓你更好的理解：

二、舉個(gè)例子

我們要實(shí)現(xiàn)這個(gè)效果，定義三個(gè)容器，給三個(gè)容器都添加一個(gè)點(diǎn)擊監(jiān)聽事件，點(diǎn)擊相應(yīng)的容器并輸出相應(yīng)的打印。我們需要觀察的是點(diǎn)擊相應(yīng)的容器的輸出結(jié)果。

1.第一種情況

當(dāng)addEventListener監(jiān)聽事件只有兩個(gè)參數(shù)時(shí)

代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #greenBox{
      width: 200px;
      height: 200px;
      background: #c2f5ca;
    }
    #pinkBox{
      width: 100px;
      height: 100px;
      background-color: #f7d0d0;
      color:#fff;  
      position: absolute;
    }
    #blackBox{
      width: 50px;
      height: 50px;
      background: #000;
    }
  </style>

 
</head>
<body>
  <div id="greenBox">
    <div id="pinkBox">
      <div id="blackBox"></div>
    </div>
  </div>
  
  <script> 
    let greenBox=document.getElementById('greenBox')
    let pinkBox=document.getElementById('pinkBox')
    let blackBox=document.getElementById('blackBox')

    greenBox.addEventListener('click',()=>{
      console.log('greenBox')
    })
    pinkBox.addEventListener('click',(event)=>{
      console.log('pinkBox') 
    })
    blackBox.addEventListener('click',(event)=>{
      console.log('blackBox')
    })
  </script>
</body>
</html>

當(dāng)我們點(diǎn)擊黑色容器時(shí)，得到的打印結(jié)果：

這是為什么呢？

答：因?yàn)閍ddEventListener是存在第三個(gè)參數(shù)的，當(dāng)沒有第三個(gè)參數(shù)時(shí)，默認(rèn)是遇到注冊(cè)的冒泡事件觸發(fā)。
1）當(dāng)js事件流從window上往事件觸發(fā)處傳播的過程中，并沒有遇到注冊(cè)的捕獲事件，故不會(huì)觸發(fā)；
2）當(dāng)js事件流從事件觸發(fā)處往window上傳播的過程中，首先遇到的是blackBox注冊(cè)的的冒泡事件,之后是pinkBox，最后是greenBox。

2.第二種情況

當(dāng)addEventListener監(jiān)聽事件有三個(gè)參數(shù)時(shí)，第三個(gè)參數(shù)為true或false。當(dāng)?shù)谌齻€(gè)參數(shù)為false時(shí)，只在遇到注冊(cè)的冒泡事件觸發(fā);為true時(shí)，只在遇到注冊(cè)的捕獲事件觸發(fā)。

1）我們?cè)?span style="font-weight: 700">greenBox的監(jiān)聽事件中添加第三個(gè)參數(shù)true，代碼如下：

 
 <script> 
    greenBox.addEventListener('click',()=>{
      console.log('greenBox')
    },true)
    pinkBox.addEventListener('click',(event)=>{
      console.log('pinkBox') 
    })
    blackBox.addEventListener('click',(event)=>{
      console.log('blackBox')
    })
  </script>

當(dāng)我們點(diǎn)擊黑色容器時(shí)，得到的打印結(jié)果：

這是為什么呢？

答：因?yàn)?code style="font-family: 'JetBranins Mono', Monaco, Consolas, 'Courier New', monospace;font-size: 0.87em;border-radius: 2px;overflow-x: auto;background-color: rgba(27, 31, 35, 0.05);color: rgb(255, 80, 44);padding: 0.065em 0.4em">greenBox的addEventListener存在的第三個(gè)參數(shù)為true，則說明greenBox只在遇到注冊(cè)的捕獲事件觸發(fā)。
1）當(dāng)js事件流從window上往事件觸發(fā)處傳播的過程中，遇到greenBox注冊(cè)的捕獲事件，故先觸發(fā)greenBox；
2）當(dāng)js事件流從事件觸發(fā)處往window上傳播的過程中，首先遇到的是blackBox注冊(cè)的的冒泡事件,之后是pinkBox。

2）我們?cè)?span style="font-weight: 700">greenBox的監(jiān)聽事件中添加第三個(gè)參數(shù)false，在pinkBox的監(jiān)聽事件中添加第三個(gè)參數(shù)true，代碼如下：

<script> 
    greenBox.addEventListener('click',()=>{
      console.log('greenBox')
    },flase)
    pinkBox.addEventListener('click',(event)=>{
      console.log('pinkBox') 
    },true)
    blackBox.addEventListener('click',(event)=>{
      console.log('blackBox')
    })
  </script>

當(dāng)我們點(diǎn)擊黑色容器時(shí)，得到的打印結(jié)果：

這個(gè)結(jié)果也是在意料之中的，首先pinkBox在遇到注冊(cè)的的捕獲事件觸發(fā)，而blackBox默認(rèn)在遇到注冊(cè)的的冒泡事件觸發(fā)，greenBox在遇到注冊(cè)的的冒泡事件觸發(fā)。

三、阻止默認(rèn)事件

當(dāng)我們想只觸發(fā)其中的一個(gè)或多個(gè)事件，而其它事件不觸發(fā)時(shí)，我們可以使用stopPropagation()和stopImmediatePropagation()函數(shù)。

stopPropagation() : 終止默認(rèn)事件傳播到其他容器上

stopImmediatePropagation() : 終止默認(rèn)事件傳播到其他容器上和 自己這個(gè)容器的其他事件

四、事件代理

事件代理是js事件機(jī)制一個(gè)重要的應(yīng)用。

1.來個(gè)例子

我們要實(shí)現(xiàn)一個(gè)列表，其中有五項(xiàng)，點(diǎn)擊任何一項(xiàng)輸出相應(yīng)的列表項(xiàng)文本。

我們大多數(shù)小白會(huì)這么寫，采用循環(huán)進(jìn)行遍歷：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  li {
    width: 100px;
    background: #efe5ad;
    font-size: 20px;
    margin: 10px;
  }
</style>

<body>
  <ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

  <script>
     let li = document.getElementsByTagName("li");
     for (let i = 0; i < li.length; i++) {
       li[i].addEventListener("click", () => {
         console.log(li[i].innerHTML)
       })
     }
  </script>
</body>

</html>

但是這樣做每次循環(huán)都需要創(chuàng)建一個(gè)監(jiān)聽事件，這就不優(yōu)雅了，試著利用js事件流來優(yōu)化它一下吧！

<script>
    //事件代理 
    let ul = document.getElementById("ul");
    ul.addEventListener("click", (event) => {
      console.log(event.target.innerHTML);
    })
  </script>

我們只需要獲取ul的dom結(jié)構(gòu)，調(diào)用ul監(jiān)聽事件參數(shù)event中的taget中的innerHTML就可以得到值啦！

2.優(yōu)點(diǎn)

只需要把事件綁定到ul上，占用的內(nèi)存更小了
可以動(dòng)態(tài)給添加的元素綁定監(jiān)聽事件，不需要每添加一個(gè)元素就重新綁定一次。

最后

我們開頭的問題想必大家都有答案了，是因?yàn)樵诓似愤@個(gè)div中默認(rèn)設(shè)置了阻止默認(rèn)事件的函數(shù)stopPropagation()，當(dāng)點(diǎn)擊按鈕時(shí)只會(huì)觸發(fā)這個(gè)按鈕的冒泡事件。故點(diǎn)擊按鈕并不會(huì)跳轉(zhuǎn)到這個(gè)菜品的詳情頁。

-------------------------------

https://juejin.cn/post/7232905822279204919

該文章在 2023/5/18 8:44:09 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...