DDR爱好者之家

js事件委托和事件代理案例分享
站长资源 2024/11/27 佚名
74 1538
DDR爱好者之家 Design By 杰米

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

　　利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。

　　具体小案例如下：　　

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米