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

2024-05-06 16:38:37

字体：大中小

来源：转载

供稿：网友

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

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

　　具体小案例如下：　　

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

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：基于JavaScript实现多级菜单效果

下一篇：利用node.js爬取指定排名网站的JS引用库详解