溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js如何實現(xiàn)事件委托和事件代理

發(fā)布時間：2021-08-17 09:25:00 來源：億速云 閱讀：127 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)js如何實現(xiàn)事件委托和事件代理的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

什么是事件委托/事件代理

　　利用事件的冒泡傳播機制（觸發(fā)當前元素的某一個行為，它父級所有元素的相關(guān)行為都會被觸發(fā)），如果一個容器中有很多元素都要綁定點擊事件，我們沒有必要一個個的綁定了，只需要給最外層容器綁定一個點擊事件即可，在這個方法執(zhí)行的時候，通過事件源的區(qū)分來進行不同的操作。

　　具體小案例如下：　　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
    }
    html,body{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    #box{
      position:absolute;
      left:50%;
      top:50px;
      width:100px;
      height:30px;
      margin-left:-50px;
      line-height:30px;
      text-align:center;
      border:1px solid #2489cc;
    }
    #mark{
      position:absolute;
      top:30px;
      left:-1px;
      width:300px;
      height:100px;
      line-height:100px;
      text-align:center;
      background:#ffe470;
      border:1px solid #2489cc;
    }
  </style>
</head>
<body>
  <div id='box'>
    <span>購物車</span>
    <div id="mark" style='display:none'>  
      查看購物車的詳細信息
    </div>
  </div>

  <script> 
    var mark = document.getElementById('mark');
    document.body.onclick = function(e){
      e = e || window.event;
      e.target = e.target || e.srcElement;

      //如果點擊的是box或者是#box下的span，我們判斷mark是否顯示，顯示讓其隱藏，反之讓其顯示
      if(e.target.id==="box" || (e.target.tagName.toLowerCase()==="span" && e.target.parentNode.id==='box')){
        if(mark.style.display === "none"){
          mark.style.display === "block"
        }else{
          mark.style.display === "none"
        }
        return;
      }
      //如果事件源是#mark，不進行任何的操作
      if(e.target.id==="mark"){
        return;
      }
      mark.style.display === "none"
    }
  </script>
</body>
</html>

感謝各位的閱讀！關(guān)于“js如何實現(xiàn)事件委托和事件代理”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手