什么是事件委托/事件代理?
利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,没有必有一个一个的绑定了,只需要给最外层的容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作。
简单应用
<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隐藏
mark.style.display = 'none';
}
</script>