js事件委托和事件代理案例分享
更新时间：2017年07月25日 09:35:56 作者：diasa
这篇文章主要为大家分享了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代码触发dom事件的实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
javascript hashtable 修正版 hashtable hashset 下载,需要的朋友可以收藏下。2010-12-12
第一次接触神奇的Bootstrap，Bootstrap提供了用户友好、扩浏览器的解决方案,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了基于JavaScript实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
这篇文章主要介绍了webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了关于js内存泄露的一个好例子。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了Javascript面向切面编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了js实现同一页面多个不同运动效果的方法,涉及javascript同时实现多个效果的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了浅析js实现网页截图的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论