浅谈JavaScript事件捕获事件冒泡与事件委托
事件捕获
- 事件捕获中,父级元素先触发,子集元素后触发
- 事件会从最外层开始,直到具体的元素,比如click的捕获过程
document->html->body->div->p
事件冒泡
- 事件冒泡时,子元素先出发,父级元素后触发
- 元素自身事件被触发后,如果父元素有相同的事件,那么元素本身的触发状态就会传递,就是冒到父元素,父元素相同事件也会一级级向外触发
- 默认情况下,所有事件处理程序都是在冒泡阶段注册的
- 如果想早捕获阶段注册事件,通过
addEventListener
来注册应用程序,并将第三个属性设置为true就可以了
<div id='app'>
<h2>事件捕获</h2>
<div id="item1">
第一层
<div id="item2">
第二层
<div id="item3">
第三层
</div>
</div>
</div>
</div>
<script>
function handleClick1(){
console.log('第一层')
}
function handleClick2(){
console.log('第二层')
}
function handleClick3(){
console.log('第三层')
}
const isCapture = false
// isCapture为false时,为事件冒泡
// 打印 第三层 -> 第二层 -> 第一层
// isCapture为true时,为事件捕获
// 打印 第一层 -> 第二层 -> 第三层
document.getElementById('item1').addEventListener('click', handleClick1, isCapture)
document.getElementById('item2').addEventListener('click', handleClick2, isCapture)
document.getElementById('item3').addEventListener('click', handleClick3, isCapture)
</script>
事件代理
- 事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素
- 一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数
- 减少内存消耗
实际应用
- 给ul下的li绑定点击事件,通过把事件绑定在ul上,来避免每一个li上绑定事件
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
......
<li>item n</li>
</ul>
// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target || event.srcElement;
// 判断是否匹配目标元素
if (target.nodeName.toLocaleLowerCase === 'li') {
console.log('the content is: ', target.innerHTML);
}
})
参考资料
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥