本文深入解析 JavaScript 中的事件委托与代理机制，阐述如何利用事件冒泡原理，通过为父容器绑定单一事件监听器来管理子元素交互，从而优化性能并简化代码。文章附带完整的 HTML 与 JavaScript 示例代码，展示如何根据事件源区分执行不同逻辑，适用于动态列表或大量 DOM 元素的场景。
事件委托与代理机制概述
事件委托，也常被称为事件代理，是前端开发中一种重要的 DOM 操作技巧。
基于冒泡原理的实现逻辑
其核心原理基于事件的冒泡传播机制。当触发某个子元素的行为时，该事件会向上传递至其所有父级元素，从而触发相应的事件处理程序。在实际开发中，如果一个容器内包含大量需要绑定点击事件的子元素，逐一为每个子元素添加监听器不仅代码冗余，还会影响性能。采用事件委托策略，只需在最外层容器上绑定一个点击事件即可。在该事件处理函数内部，通过判断事件源（event target）的具体身份，来执行差异化的业务逻辑。
具体代码案例展示
以下是一个具体的实现案例：
<!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>
以上内容为本文的全部分享，旨在帮助读者理解并掌握相关技术，欢迎持续关注本站获取更多优质教程。