DOM事件模型和DOM事件机制

106 阅读1分钟

什么是DOM

DOM全称Document Object Model,即文档对象模型,以根元素开头展开成一颗树,描述了处理网页内容的方法和接口。

什么是DOM事件

举个简单的例子,click就是一个事件,click后面可以绑定函数用来执行相对应的功能,事件可以在Document结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身。事件并不是只是在一处被触发和终止;他们在整个Document中流动,拥有它们自己的生命周期。

DOM事件模型和DOM事件机制

DOM事件模型本身就是解释元素有绑定函数执行顺序。

image.png

如上图所示,当<td>被点击之后,他上面的节点从<tr>Window都可以加上一个click事件去执行函数,而函数执行的顺序一共分为两种:

  1. 一种是从Window<tr>,这种行为叫做捕获
  2. 一种是从<tr>``Window,这种行为叫做冒泡

至于click事件具体使用哪种方式,则需要通过addEventListener的第三个参数进行控制

e.addEventLisenter('click',f2,true) // true按捕获方向执行函数
e.addEventLisenter('click',f2,false) // false按冒泡方向执行函数

第三个参数的默认值是false,默认是先进行捕获,在进行冒泡

阻止事件冒泡

e.stopPropagation()可以中断冒泡

捕获则是无法取消的,因为DOM是一颗树,根一定在的。只有顺着根不断发展。