DOM事件和事件委托

137 阅读2分钟

回答2个面试题常问的题目

此文参考《JavaScript高级程序设计》 第17章 事件

DOM事件模型

历史上,IE和网景面对页面接受事件的顺序产生了不同的想法。

IE认为事件应该从最具体的元素,也就是文档树中最深的节点开始出发,然后向上传播到没有那么具体的元素,也就是文档。IE的事件流被称为事件冒泡。

而网景提出了另一种名为事件捕获的事件流,意思是最不具体的节点应该最先收到事件,而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。

而现在规范中规定了事件流分为3个阶段:事件捕获、到达目标和事件冒泡。

事件捕获最先发生,为拦截事件提供了可能。然后实际的目标接受事件,最后发生事件冒泡。

实际上,到达目标这个阶段会被认为是冒泡阶段的一部分,而现代的浏览器又做出了拓展,在捕获阶段也到达目标触发事件,最终结果就是在事件目标上有两个机会来处理事件

DOM事件委托

事件委托就是利用事件冒泡,只使用一个事件处理程序来管理一种类型的事件。

例如有一个ul中有3个li,每个li被点击时都会执行某种操作,如果我们对每个li都添加事件处理程序,就会造成大量重复的代码,浪费性能。

合理的做法是对这3个li共同的祖先节点添加一个事件处理程序,因为每个列表项都是这个祖先节点的后代,所有它们的事件都会向上冒泡,最终都会由这一个函数来处理。