JavaScript事件委托原理與用法實(shí)例分析

更新時(shí)間：2018年06月07日 10:49:26 作者：考拉的墨爾本

這篇文章主要介紹了JavaScript事件委托原理與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript事件流以及事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例分析了JavaScript事件委托原理與用法。分享給大家供大家參考，具體如下：

在日常中，我們可能會(huì)聽到事件委托這樣的概念，有些同學(xué)可能對(duì)事件委托已經(jīng)很了解了，也有些同學(xué)可能只是聽過事件委托，只是會(huì)簡單的使用，但是對(duì)于事件委托的原理不怎么知道。所以該博文會(huì)解釋一下原生js的事件委托的原理，為什么會(huì)有事件委托，為什么可以這樣用事件委托等等問題。

1. js中的事件流

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

① .冒泡：當(dāng)下級(jí)節(jié)點(diǎn)觸發(fā)某個(gè)事件的時(shí)候，該事件會(huì)逐級(jí)向上觸發(fā)上級(jí)節(jié)點(diǎn)的同類事件。

② .捕獲：和冒泡類似，只不過事件的順序相反。即是從上級(jí)節(jié)點(diǎn)傳遞到下級(jí)節(jié)點(diǎn)

2. 事件委托原理

事件委托就是基于js的事件流產(chǎn)生的，事件委托是利用事件冒泡，將事件加在父元素或者祖先元素上，觸發(fā)該事件。

<body>
  <div id="myDiv">
    <input type="button" value="按鈕1" id="btn1">
    <input type="button" value="按鈕2" id="btn2">
    <input type="button" value="按鈕3" id="btn3">
  </div>
</body>
<script type="text/javascript">
  document.getElementById("myDiv").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>

上面的代碼就是一個(gè)典型的事件委托案例。利用的原理就是事件冒泡，將事件加載父元素上，通過event參數(shù)來區(qū)別按鈕的不同

3. 總結(jié)

通過對(duì)上面事件委托代碼的觀察，我們可以很容易得出事件委托的好處：

① .減少頁面綁定事件數(shù)量，由于頁面事件綁定數(shù)量越多，頁面執(zhí)行性能越差，所以事件委托可以提高頁面的性能

② .事件委托可以靈活的處理子節(jié)點(diǎn)動(dòng)態(tài)變化的場(chǎng)景，無論子節(jié)點(diǎn)增加還是減少，事件都無需重新綁定

PS：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

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

您可能感興趣的文章: