探寻一下JavaScript中的“事件”家族

原创 小枝节KKW 随笔 JS 160阅读 2017-06-20 08:33:31 举报

众所周知,事件用来处理js和html之间的交互,使用的特别频繁,虽然我也每天都在用,但总是感觉用的稀里糊涂,所以想借此机会来做一下总结。

1.事件处理程序(绑定事件)

(1) HTML事件处理程序:直接在html中绑定事件
html 代码

这种不太推荐使用,有以下缺点:
<1> 可能有先后顺序问题,就是点击按钮的时候,如果test函数在最下边可能还没有解析到,这时候就会报错。
<2> html代码和js代码紧密耦合,不太推荐
(2) DOM0级事件处理程序
javascript 代码

这种方式添加的事件是在事件流的冒泡阶段被处理,事件流下边再说。
(3) DOM2级事件处理程序
html 代码

这里边有3点需要注意的:
<1> 第3个布尔值的参数:true表示在捕获阶段调用;false表示在冒泡阶段调用/color
<2> 由于removeEventListener的事件函数必须与addEventListener添加时的相同,所以[color=#ff0000]addEventListener添加的匿名函数是不能被移除的

<3> 可以为一个元素添加多个事件处理程序,并且这些事件顺序触发
javascript 代码

上述btn的事件是不能被移除掉的,虽然看似事件的代码完全相同,但却是2个不同的匿名函数
(4)IE事件处理程序
html 代码

同样也需注意以下几点:
<1> 同addEventListener一样,attachEvent添加的匿名函数不能被移除
<2> 事件函数在全局作用域下运行,即事件中的this指向window
<3> 可以为一个元素添加多个事件处理程序,并且这些事件逆序触发
<4> 事件函数被添加到冒泡阶段
其实attachEvent和addEventListener类似,两者之间的异同见下表:

探寻一下JavaScript中的“事件”家族

2事件流

DOM2级规定的事件流包括3个阶段:事件捕获阶段、目标阶段、事件冒泡阶段
事件捕获过程:document --> html --> body --> div
事件冒泡过程:div --> body --> html --> document
事件默认是在冒泡阶段被触发,捕获阶段不会接收事件

3.事件对象

添加事件时,浏览器会将一个event对象传入事件处理程序当中
html 代码

事件对象的属性和方法在这不一一列举了,对比一下DOM事件对象和IE事件对象一些不同的地方

探寻一下JavaScript中的“事件”家族
在这里补充比较容易混淆的2点:
(1) DOM事件对象中 e.currentTarget、e.target、this三者之间的关系
e.currentTarget:当前正在处理事件的元素(被绑定事件的元素)
e.target:事件的目标,实际被真正点击的元素
当绑定事件的元素是真正被点击的元素时,e.currentTarget == e.target
html 代码

(2)IE事件对象中e.srcElement、this、window三者之间的关系
DOM0级中,event对象作为window的属性存在,而不是被传入事件处理程序中
html 代码

关于事件,这些只是冰山一角,后续跟进~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复