[轉帖]玩轉js事件機制

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

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

js事件機制

正文

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

一、js事件流

js事件流一共分為三個階段：

從 window上往事件觸發處傳播，遇到注冊的捕獲事件 就會觸發。
傳播到事件觸發處，觸發注冊的事件。
從事件觸發處往 window上傳播，遇到注冊的冒泡事件 觸發。

來張圖讓你更好的理解：

二、舉個例子

我們要實現這個效果，定義三個容器，給三個容器都添加一個點擊監聽事件，點擊相應的容器并輸出相應的打印。我們需要觀察的是點擊相應的容器的輸出結果。

1.第一種情況

當addEventListener監聽事件只有兩個參數時

代碼如下：

<!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>

當我們點擊黑色容器時，得到的打印結果：

這是為什么呢？

答：因為addEventListener是存在第三個參數的，當沒有第三個參數時，默認是遇到注冊的冒泡事件觸發。
1）當js事件流從window上往事件觸發處傳播的過程中，并沒有遇到注冊的捕獲事件，故不會觸發；
2）當js事件流從事件觸發處往window上傳播的過程中，首先遇到的是blackBox注冊的的冒泡事件,之后是pinkBox，最后是greenBox。

2.第二種情況

當addEventListener監聽事件有三個參數時，第三個參數為true或false。當第三個參數為false時，只在遇到注冊的冒泡事件觸發;為true時，只在遇到注冊的捕獲事件觸發。

1）我們在greenBox的監聽事件中添加第三個參數true，代碼如下：

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

當我們點擊黑色容器時，得到的打印結果：

這是為什么呢？

答：因為greenBox的addEventListener存在的第三個參數為true，則說明greenBox只在遇到注冊的捕獲事件觸發。
1）當js事件流從window上往事件觸發處傳播的過程中，遇到greenBox注冊的捕獲事件，故先觸發greenBox；
2）當js事件流從事件觸發處往window上傳播的過程中，首先遇到的是blackBox注冊的的冒泡事件,之后是pinkBox。

2）我們在greenBox的監聽事件中添加第三個參數false，在pinkBox的監聽事件中添加第三個參數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>

當我們點擊黑色容器時，得到的打印結果：

這個結果也是在意料之中的，首先pinkBox在遇到注冊的的捕獲事件觸發，而blackBox默認在遇到注冊的的冒泡事件觸發，greenBox在遇到注冊的的冒泡事件觸發。

三、阻止默認事件

當我們想只觸發其中的一個或多個事件，而其它事件不觸發時，我們可以使用stopPropagation()和stopImmediatePropagation()函數。

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

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

四、事件代理

事件代理是js事件機制一個重要的應用。

1.來個例子

我們要實現一個列表，其中有五項，點擊任何一項輸出相應的列表項文本。

我們大多數小白會這么寫，采用循環進行遍歷：

<!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>

但是這樣做每次循環都需要創建一個監聽事件，這就不優雅了，試著利用js事件流來優化它一下吧！

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

我們只需要獲取ul的dom結構，調用ul監聽事件參數event中的taget中的innerHTML就可以得到值啦！

2.優點

只需要把事件綁定到ul上，占用的內存更小了
可以動態給添加的元素綁定監聽事件，不需要每添加一個元素就重新綁定一次。

最后

我們開頭的問題想必大家都有答案了，是因為在菜品這個div中默認設置了阻止默認事件的函數stopPropagation()，當點擊按鈕時只會觸發這個按鈕的冒泡事件。故點擊按鈕并不會跳轉到這個菜品的詳情頁。

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

https://juejin.cn/post/7232905822279204919

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

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv