js事件委託是什麼？使用js事件委託的好處有哪些？-js教程-PHP中文網

首頁

web前端

js教程

js事件委託是什麼？使用js事件委託的好處有哪些？

不言

Aug 29, 2018 pm 05:37 PM

js事件委託

js事件委託是什麼？使用事件委託又有哪些好處？ 相信很多的朋友或許會有這樣的疑問，那麼，接下來的這篇文章就給大家來說一說關於js事件委託的概念以及使用js事件委託的好處。

1、什麼是js事件委託？

利用事件冒泡處理動態元素事件綁定的方法，專業術語叫事件委託，簡單點來說就是給父元素綁定事件，用來監聽子元素的冒泡事件，並找到是哪個子元素的事件，更加通俗一點那就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。（事件有哪些？請看：JavaScript中文參考手冊）

例如下面這個範例：原生js實作事件委託

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

注意： js實作事件委託有三個步驟：

第一步：給父元素綁定事件
給元素ul新增綁定事件，透過addEventListener為點擊事件click新增綁定

第二步：監聽子元素的冒泡事件
這裡預設是冒泡，點選子元素li會向上冒泡

#第三步：找到是哪個子元素的事件

透過匿名回呼函數的參數e用來接收事件對象，透過target取得觸發事件的目標

2、js事件委託的好處：

事件委託的好處1：事件委託技術可以避免對每個字元素添加事件監聽器，減少操作DOM節點的次數，從而減少瀏覽器的重繪和重排，提高程式碼的效能。

我們可以看一個例子：我們要做動態的新增li。點擊button動態新增li

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

不用事件委託我們會這樣做：

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

這樣做我們可以看到點擊按鈕新加的li上面沒有滑鼠移入事件來改變他們的背景顏色。

因為點選新增的時候for迴圈已經執行完畢。

那麼我們用事件委託的方式來做。就是html不變

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

事件委託的好處2：使用事件委託，只有父元素與DOM存在交互，其他的操作都是在JS虛擬記憶體中完成的，這樣就大大提高了性能。

相關推薦：

js中的事件委託

#javascript事件委託和jQuery事件綁定on、off 和one

以上是js事件委託是什麼？使用js事件委託的好處有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

Java vs JavaScript：開發人員的詳細比較May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。