快捷導(dǎo)航

js事件委托和事件代理案例分享

更新時間：2017年07月25日 09:35:56 作者：diasa

這篇文章主要為大家分享了js事件委托和事件代理案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

　　利用事件的冒泡傳播機制（觸發(fā)當(dāng)前元素的某一個行為，它父級所有元素的相關(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'>  
      查看購物車的詳細(xì)信息
    </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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: