DOM事件模型与事件委托

127 阅读2分钟

1.什么是DOM

DOM全称文档对象模型Document Object Model。DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准。

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

2.DOM事件

DOM使Javascript有能力对HTML上的事件做出反应。这些事件包括鼠标键盘的点击事件、移动事件以及页面中内容的变化等。DOM的结构是一个树形,每当HTML元素产生事件时,该事件就会在树的根节点和元素节点之间传播,所有经过的节点都会收到该事件。

image.png

3.冒泡事件(Bubbling)、捕获事件(Captrue)标准DOM事件处理模型

冒泡事件 在事件发生时,冒泡事件处理模型首先在最精确的元素上触发,然后向上传播,直到根节点(由下而上)。反映到DOM树上就是事件从叶子节点传播到根节点。

捕获事件 在事件发生时,捕获事件处理模型在事件首先在最顶级的元素上触发,传播到最低级的元素上(由上而下)。在DOM树上的表现就是由根节点传播到叶子节点。

标准的DOM事件处理模型 标准的事件处理模型分为三个阶段:

  1. 父元素中所有的捕捉型事件(如果有)自上而下地执行。
  2. 目标元素的冒泡型事件(如果有)。
  3. 父元素中所有的冒泡型事件(如果有)自下而上地执行。 简单来说,事件处理的方式是:先捕获、再冒泡。

4.事件委托

对于很多要监听的子元素,如果在每个子元素上都进行监听,一来在编程时重复度太高,二来非常耗内存。如果将它们的事件委托在这些子元素的父元素或者是更外层的父元素上,则能够更简洁高效。 事件委托的优势:

  • 节约监听数量 。
  • 可以监听动态生成的元素。
  • 可以节省内存。