1. 什么是事件委托?
事件委托也称之为事件代理(Event Delegation) ,是JavaScript中常用绑定事件的常用技巧。
顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
假设有这么一个场景,有一个列表是根据
数组动态渲染
的,而渲染出来的每条数据
都需要同样的点击事件及回调
。
2. 事件委托有什么好处?
2.1 减少内存消耗
想象一下,如果给每个列表项都绑定
一个函数,那对于内存消耗是非常大
的,效率上需要消耗很多性能;
假设遍历3、5次, 分别对标签绑定事件,可能体现不出来。 那要是遍历上几十遍、上百遍,那么差距就会愈加明显了
所以这种时候,最好的做法就是将事件委托
到其父元素身上。
2.2 动态绑定事件
再如上描述,每个标签都绑定事件,当标签删除再渲染
的时候,事件也会先卸载再重新绑定
,此时就很麻烦,且重复操作。
如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层
的,和目标元素的增减是没有关系
的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的
3. 普通写法与事件委托写法对比
3.1 普通写法
const Sidebar = (props) => {
function clickCallback(e) {
let type = e.target.getAttribute("data-type");
props.pushTags(type);
}
return (
<ul className={styles.sidebar} id="ul">
{typeMap.map((item) => (
<li
data-type={item.id}
key={item.id}
onClick={(e) => clickCallback(e)}
>
{item.desc}
</li>
))}
</ul>
);
};
3.2 事件委托方式
const Sidebar = (props) => {
useEffect(() => {
document.getElementById("ul").addEventListener("click", (e) => {
if (e.target.nodeName == "UL") return;
let type = e.target.getAttribute("data-type");
props.pushTags(type);
});
}, []);
return (
<ul className={styles.sidebar} id="ul">
{typeMap.map((item) => (
<li data-type={item.type} key={item.id}>
{item.desc}
</li>
))}
</ul>
);
};
that’s all~