DOM事件模型

1.历史

2.DOM level2 标准

DOM level3没有对事件进行修订,所以DOM事件模型的标准就是DOM level2 制定的标准
规定了
事件捕获event capture
事件冒泡event bubbling
事件取消event cancelation

3.DOM level 0和1知识点

在html的onclick属性中,使用时要加括号,
在js的onclick中,给点击事件赋值,不加括号.

写在html里,相当于eval()字符串里的代码(eval是执行),eval("print")意思是执行这个print这个代码,eval("print()")意思是执行print().

在js里,print 为一个函数,返回类型也为函数,赋值的时候,就是把函数这个类型赋给onclick,而print()返回类型为undefined.

4.DOM level 2知识点

4.1在L1中,事件属性

在DOM level1中,onclick只是一个属性,可以被覆盖,所以一个元素只能有一个onclick时事件

4.2在L2中,事件监听队列

事件监听队列,xxx有用一个队列,是eventListeners事件监听队列,先添加的先触发

先进先出,先绑定的先触发,可以绑定多个相同的事件
每一个事件都有一个自己的队列,click有click的队列mouseenter有他自己的队列

也可以移出队列

也可以只触发一次

相当于jQuery中的one

总结:

4.3DOM level 2中的两个阶段

总结:

如果不传送参数()默认,或者传输false,那么就从内到外.
如果传true,从外到内
跟代码顺序没有关系,如果坚挺的是同一个元素,才跟代码顺序有关系

4.4 触发顺序总结:捕获与冒泡阶段

执行顺序就是先从左,往下,再从底,往右上,如果不写第三个参数或者第三个参数为false,那么函数就只在右边,执行顺序就是fn3,fn2,fn1.

如果把参数改为true,那么函数会跑到左边,执行顺序发生改变:
如下图

所以分为两个阶段

从上到下,捕获阶段
从下到上,冒泡阶段

事件模型就是先捕获,再冒泡.
执行顺序就是先捕获再冒泡,看他在不活的路上还是冒泡的路上

4.5考点,如果一个元素同时有捕获和冒泡,即第三个参数有事false,又是true

特例:

如果这个元素是最底层的元素(是嵌套的里面嘴内部的元素),那么不管是捕获还是冒泡,先写的先执行.如图:

(一般没人会选用两个阶段来用),
要么左边要么右边

DOM事件模型