这篇文章给大家分享的是有关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如何实现事件委托和事件代理”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
