DOM事件与事件委托

139 阅读1分钟

DOM 事件模型或DOM事件机制

DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。

(1)捕获阶段:事件从window对象自上而下(由外到内)向目标节点传播的阶段;

(2)目标阶段:真正的目标节点正在处理事件的阶段;

(3)冒泡阶段:事件从目标节点自下而上(由内到外)向window对象传播的阶段,事件捕获的逆过程。

捕获与冒泡.png

事件代理(事件委托)

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。
省监听数,减少内存消耗
场景一: 要给100个按钮添加点击事件,每个都绑定一个函数,那对于内存消耗是非常大的,效率上需要消耗很多性能。借助事件代理,我们只需要给父容器绑定方法即可,这样不管点击的是哪一个后代元素,都会根据冒泡传播的传递机制,把容器的click行为触发,然后把对应的方法执行,根据事件源,我们可以知道点击的是谁,从而完成不同的事。
可以监听动态元素
场景二: 如果要监听不存在的元素点击事件,怎么办?可以监听上层元素,等点击的时候判断是不是要监听的元素。