首頁 >web前端 >js教程 >如何在專案中使用JS事件委託

如何在專案中使用JS事件委託

php中世界最好的语言
php中世界最好的语言原創
2018-06-09 11:53:091507瀏覽

這次帶給大家如何在專案中使用JS事件委託,在專案中使用JS事件委託的注意事項有哪些,以下就是實戰案例,一起來看一下。

在日常中,我們可能會聽到事件委託這樣的概念,有些同學可能對事件委託已經很了解了,也有些同學可能只是聽過事件委託,只是會簡單的使用,但是對於事件委託的原理不怎麼知道。所以部落格文章會解釋原生js的事件委託的原理,為什麼會有事件委託,為什麼可以這樣用事件委託等等問題。

1. js中的事件流

在解析事件委託之前,我們先回顧一下js中的事件流,即冒泡和捕獲。

① .冒泡:當下級節點觸發某個事件的時候,該事件會逐級向上觸發上級節點的同類事件。

② .捕獲:和冒泡類似,只不過事件的順序相反。即是從上級節點傳遞到下級節點

2. 事件委託原理

事件委託就是基於js的事件流產生的,事件委託是利用事件冒泡,將事件加在父元素或祖先元素上,觸發該事件。

<body>
  <p id="myp">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </p>
</body>
<script type="text/javascript">
  document.getElementById("myp").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

上面的程式碼就是一個典型的事件委託案例。利用的原理就是事件冒泡,將事件載入父元素上,透過event參數來區分按鈕的不同

#3. 總結

透過對上面事件委託程式碼的觀察,我們可以很容易得出事件委託的好處:

① .減少頁面綁定事件數量,由於頁面事件綁定數量越多,頁面執行性能越差,所以事件委託可以提高頁面的效能

② .事件委託可以靈活的處理子節點動態變化的場景,無論子節點增加或減少,事件都無需重新綁定

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

webpack刷新解析功能使用

#怎麼在實戰專案中使用Installation外掛程式

以上是如何在專案中使用JS事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn