我来说说JS中的事件委托

147 阅读2分钟

我来说说JS中的事件委托

概念

通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素;

原理

DOM 中事件委托的实现是利用事件冒泡的机制,

什么事冒泡原理

  • 在 document.addEventListener 的时候我们可以设置事件模型:事件冒泡、事件捕获,一般来说都是用事件冒泡的模型

image.png - 如上图所示,事件模型是指分为三个阶段:

捕获阶段:在事件冒泡的模型中,捕获阶段不会响应任何事件; 目标阶段:目标阶段就是指事件响应到触发事件的最底层元素上; 冒泡阶段:冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层(根节点),事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层;

委托事件优点

1. 减少内存消耗: 如果给每个列表项都绑定一个函数,那对于内存消耗是非常大的,效率上需要消耗很多性能,所以事件委托可以减少大量的内存消耗,节约效率

2.减少事件的注册,只需要注册化父容器

3.可以为已存在和未来的元素注册事件,注册一次,现在未来通用

委托事件缺点

1. focus、blur 之类的事件本身没有事件冒泡机制,所以无法委托

mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的;

使用场景

动态的渲染的元素的事件注册使用委托,动态渲染的元素的事件只能使用委托