简述DOM事件机制与事件委托

401 阅读2分钟

对事件冒泡和捕获的解释

当一个事件发生在具有父元素的元素上时,现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

在捕获阶段:

  • 浏览器检查元素的最外层祖先<Window>,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它。
  • 然后,它移动到<Window>中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素。

在冒泡阶段,恰恰相反:

  • 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它
  • 然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达<Window>元素。

image.png

事件委托

事件委托,一般来讲,就是把一个或一组元素响应事件的函数委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。

优点

1.减少内存消耗(省监听数)

例如:

你要给100个按钮添加点击事件,咋办?

如果给每个按钮添加点击事件,那对于内存消耗是非常大的,效率上需要消耗很多性能;

因此,我们可以监听这100个按钮的父层元素,等冒泡的时候判断target是不是这100个按钮中的一个;

所以事件委托可以减少大量的内存消耗,节约效率。


2.可以监听动态元素

例如:

你要监听目前不存在的元素的点击事件,咋办?

答:监听祖先,等点击的时候看看是不是我想要监听的元素即可。