JavaScript事件委托原理與用法實(shí)例分析-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司專注于相城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供相城營銷型網(wǎng)站建設(shè)，相城網(wǎng)站制作、相城網(wǎng)頁設(shè)計、相城網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造相城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供相城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

1. js中的事件流

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

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

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

分享標(biāo)題：JavaScript事件委托原理與用法實(shí)例分析-創(chuàng)新互聯(lián)
分享路徑：http://www.rwnh.cn/article30/dsddso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、定制網(wǎng)站、軟件開發(fā)、外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

JavaScript事件委托原理與用法實(shí)例分析-創(chuàng)新互聯(lián)