JS—事故委托:3分钟掌握事故委托
个人博客:haichenyi.com。感谢关注一. 目录
[*]一–目录
[*]二–核心原理
[*]三–事故的组成
[*]四–如何实现
[*]五–高频使用场景
[*]六–最佳实践指南
二. 核心原理
什么是事故的委托? 事故委托就是利用冒泡机制,把子元素的事故统一委托给父元素处理的优化机制。在部分场景,能显著提升性能。
[*]事故冒泡:当子元素触发事故(如:点击),会统一从子元素从下往上传递,不停传递到document
[*]父元素统一监听:通过给父元素绑定事故监听器,利用event.target识别实际触发的子元素,制止为每个子元素添加事故。
以上就有两个问题:什么是事故冒泡?怎么给父元素绑定监听器?
三. 事故的组成
JavaScript中一个事故是由三个阶段组成:捕获阶段,目标阶段,冒泡阶段。
阶段触发次序监听方式捕获阶段1addEventListener(type, handler, true)目标阶段2直接绑定到目标元素的事故冒泡阶段3addEventListener(type, handler, false) 举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>事件委托</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.grandparent {
width: 200px;
height: 200px;
background-color: aqua;
}
.parent {
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
.child {
width: 50px;
height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div id="grandparent" class="grandparent">
<div id="parent" class="parent">
<button id="child" class="child"></button>
</div>
</div>
</body>
<script>
//捕获阶段监听
document.getElementById('grandparent').addEventListener('click', (event) => {
console.log("grandparent 捕获阶段");
}, true)
document.getElementById('parent').addEventListener('click', (event) => {
console.log("parent 捕获阶段");
}, true)
document.getElementById('child').addEventListener('click', (event) => {
console.log("child 捕获");
}, true)
//冒泡阶段监听
document.getElementById('child').addEventListener('click', (event) => {
console.log("child 冒泡");
}, false)
document.getElementById('parent').addEventListener('click', (event) => {
console.log("parent 冒泡阶段");
}, false)
document.getElementById('grandparent').addEventListener('click', (event) => {
console.log("grandparent 冒泡阶段");
}, false)
</script>
</html>
https://i-blog.csdnimg.cn/direct/6ccc3e7a201849a9ba795b332af9decb.png
https://i-blog.csdnimg.cn/direct/cb8d8eb71cb3424dae2cf93809db3706.png
https://i-blog.csdnimg.cn/direct/5927a65c037045c0a64d59178ff83a15.png
上面这个简朴的例子的就是一个事故的整个执行过程。三张图分别点击三个区域的打印
一共三个元素,分别监听了他们的click事故。
[*]当我点击child的时间,我的目标元素就是child。会先执行:grandparent(捕获)—>parent(捕获)—>child(捕获)—>child冒泡—>parent(冒泡)—>grandparent(冒泡)
[*]当我点击parent的时间,我的目标元素就是parent。执行次序:grandparent(捕获)—>parent(捕获)—>parent(冒泡)—>grandparent(冒泡)
[*]当我点击grandparent的时间,我们的目标元素就是grandparent。执行次序:grandparent(捕获)—>grandparent(冒泡)
有人就会问了,三个阶段,为什么没有目标阶段?什么是目标阶段?表格上面就说了。目标阶段直接绑定在目标元素上。 可以这么理解。当我点击child元素的时间,当事故传递到child身上的时间,目标阶段就已经触发了。目标阶段是一个独立的阶段,捕获和冒泡是事故传递的路径。
说白了,就是Android内里的事故触摸的传递。down事故:由activity到目标view,up事故:由view到activity的过程。return true还是false,表示是否需要自己消耗整个事故,不继承传递。
捕获对应down事故,冒泡对应up事故。
范例向下事故向上事故是否自己消耗AndroidDownUPreturn true/falseJavaScript捕获阶段冒泡阶段stopPropagation 当父子view都添加了点击事故,当我触发子view的点击事故的时间,不想触发父view的点击事故,该怎么做呢?阻止事故冒泡,也就是上面的说,自己消耗这个事故,不让它继承传递了。好比:
document.getElementById('child').addEventListener('click', (event) => {
console.log("child 冒泡阶段");
//直接给目标view,添加一行这个代码,表示组织事件冒泡,也就是不继续传递了。
event.stopPropagation()
}, false)
https://i-blog.csdnimg.cn/direct/abe90a9a64a94c1ba38249c210e97b97.png
特殊的事故
有一些事故是没有冒泡事故的
事故范例办理方案focus/blur使用 focusin/focusout(支持冒泡)mouseenter/mouseleave改用 mouseover/mouseout + 条件判断load/unload仅作用于目标元素
四. 如何实现
我们开头举的例子使用事故委托,需要怎么改呢?
document.getElementById('grandparent').addEventListener('click', (event) => {
// 识别实际点击的目标元素
const target = event.target.closest('#child, #parent, #grandparent');
if (!target) return; // 非目标元素则退出
// 根据元素 ID 执行不同逻辑
switch (target.id) {
case 'child':
console.log('委托处理:child 被点击');
// event.stopPropagation(); // 如需阻止冒泡在此处调用
break;
case 'parent':
console.log('委托处理:parent 被点击');
break;
case 'grandparent':
console.log('委托处理:grandparent 被点击');
break;
}
});
如上的代码,我们给grandparent设置点击事故,然后利用event对象,判断点击的组件时哪个,就触发对应的逻辑即可。就是这么简朴。
核心思想,就是找到你想要设置点击事故view,他们功能的父view,然后给父view设置点击事故,利用事故分发的原理,判断即可。
这里有几点需要留意:
属性说明event.target始终指向实际触发事故的viewevent.currentTarget指向当前绑定监听事故的view(在本例中也就是上面说的grandparent) 方法作用范围说明event.stopPropagation()当前阶段阻止事故继承传播(不影响同阶段其他监听器)event.stopImmediatePropagation()所有阶段立刻停止所有后续监听器执行
五. 高频使用场景
动态列表高频更新
当 v-for 渲染的列表频繁增删时,单独绑定事故会导致重复解绑/绑定。
优化方案: 委托到父容器,利用 event.target 判断触发元素
<div class="list-container" @click="handleDelegateClick">
<div v-for="item in dynamicList" :data-id="item.id">{{ item.text }}</div>
</div>
methods: {
handleDelegateClick(event) {
const target = event.target.closest('');
if (!target) return;
const itemId = target.dataset.id;
// 根据 id 找到对应数据
}
}
复杂子元素布局
当子元素内部包含交互元素时,直接 @click 会导致事故目标判断困难:
<div class="card" @click="handleCard">
<button @click.stop="handleDelete">删除</button>
</div>
问题: 点击按钮会同时触发 handleCard 和 handleDelete
办理方案: 统一委托到父级,通过类名区分目标
<div class="cards-container" @click="handleContainerClick">
<div class="card" data-type="card">
<button data-type="deleteBtn">删除</button>
</div>
</div>
methods: {
handleContainerClick(event) {
const type = event.target.dataset.type;
switch(type) {
case 'card':
// 处理卡片点击
break;
case 'deleteBtn':
// 处理删除按钮
break;
}
}
}
超长列表性能优化
渲染 1000+ 个带点击事故的元素时,单独绑定会导致内存激增。
绑定方式内存占用滚动流通度单独 @click高卡顿事故委托低流通 ps:并不是所有的列表都需要,列表充足长才需要。一样平常不需要。
六. 最佳实践指南
场景推荐方案小型静态列表 (<100 项)直接使用 @click动态增删列表父级容器委托 + dataset 标志高频交互的可滚动长列表虚拟滚动 + 事故委托需要精确控制事故传播的场景委托 + event.stopPropagation 决策树:
元素数量 > 500? → 是 → 必须用事故委托
↓ 否
是否需要动态更新? → 是 → 推荐委托
↓ 否
是否有复杂子布局? → 是 → 建议委托
↓ 否
直接使用 @click
PS:整篇文章,精炼一下,如下
[*]事故委托的核心原理:利用冒泡机制和事故统一交给父view处理
[*]事故的组成三个阶段:捕获,目标,冒泡
[*]捕获阶段:从上往下传递,冒泡阶段冲下往上传递。
[*]怎么实现事故委托:父view统一监听,使用event.target属性去判断。使用event.stopPropagation()阻止事故传递
[*]什么情况下需要使用事故委托?
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]