请解释什么是事件代理

系列文章目录

事件代理

事件代理：就是把一个元素的响应事件的函数委托给另一个元素
js的事件流会经过三个阶段：捕获阶段->目标阶段->冒泡阶段，而事件委托就是在冒泡阶段完成。

事件委托

会把一个或一组元素的事件委托到它的父级或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素
当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上执行函数
适合事件委托的事件有： click ， mousedown ， mouseup ， keydown ， keyup ， keypress 从上⾯应⽤场景中。

事件委托存在两⼤优点：
减少整个⻚⾯所需的内存，提升整体性能
动态绑定，减少重复⼯作
但是使⽤事件委托也是存在局限性：
focus 、 blur 这些事件没有事件冒泡机制，所以⽆法进⾏委托绑定事件
mousemove 、 mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位， 对性能消耗⾼，因此也是不适合于事件委托的
如果把所有事件都⽤事件代理，可能会出现事件误判，即本不该被触发的事件被绑定上了事件。