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

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

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

　　具体小案例如下：　　

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

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

# js # 事件委托 # 事件代理 # js中的事件委托或是事件代理使用详解 # JS事件处理机制及事件代理（事件委托）实例详解 # JS 事件绑定、事件监听、事件委托详细介绍 # javascript事件委托的方式绑定详解 # JavaScript中的事件委托及好处 # JavaScript动态添加事件之事件委托 # JavaScript事件委托(事件代理)举例详解 # 购物车 # 绑定 # 让其 # 的是 # 在这个 # 都要 # 中有 # 只需 # 或者是 # 要给 # 定了 # 大家多多 # 最外层 # 没有必要 # font # size # Document # padding # title # style

返回目录在线咨询

上一篇：国外建站空间选择指南：服务器配置与中文字体兼容优化
下一篇：使用NumPy高效地在3D网格中填充点

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求