基本定义
事件: 事件就是浏览器或者用户执行的某种动作,比如文档加载完毕(load)、鼠标点击(click)等等。
事件处理程序: 事件处理程序是响应事件的函数。事件处理程序可以看做是动作的结果,比如文档加载完毕或者点击鼠标之后会发生什么。
为一个事件添加事件处理程序有四种方式。分别为:HTML、DOM0级、DOM2级、IE。
事件处理程序
HTML 事件处理程序
最开始学习 JavaScript 的时候,用到的就是 HTML 事件处理程序,就是直接在 HTML 代码中添加事件处理程序。
比如直接在 HTML 标签内添加:
|
|
或添加到 script 标签中(外部 js 文件):
|
|
优点:
|
|
可以通过 event 函数直接访问事件对象,比如 event.type
在函数内部,this 指向事件的目标元素,在上面第二行代码中,this 指向的就是这个 button 元素
事件处理程序中的代码在执行时,有权访问到全局作用域中的任何代码,这就是为什么我们可以把函数定义在 script 中,同样也可以调用
缺点:
时差问题: 用户可能在 HTML 元素一出现就触发事件,而此时该事件的脚本可能还没有加载完成
HTML 与 JavaScript 代码紧密耦合
DOM0 级事件处理程序
将一个函数赋值给一个事件处理程序属性。比如:
|
|
在 DOM0 级事件处理程序中,this 指向的是这个对象。
优点: HTML 与 JavaScript 代码联系不紧密。
缺点: 不能给一个元素同时添加多个相同的事件处理程序,后添加的事件事件处理程序会覆盖之前的。
|
|
DOM2级事件处理程序
DOM2 级事件处理程序用到的是 addEventListenter 方法。
|
|
注意在 DOM2 级事件处理程序中,type 是不带 on 的,handler 是事件处理函数,true 表示在捕获阶段调用事件处理程序,false 表示在冒泡阶段调用。
|
|
移除:通过 addEventListenter() 添加的事件处理程序,只能通过 removeEventListenter() 移除。
|
|
优点:
可以一个事件添加多个事件处理程序
浏览器支持性好
HTML 与 JavaScript 代码联系不紧密
|
|
缺点:
通过 addEventListenter() 添加的匿名函数无法移除
IE8 及以下版本不支持该方法
IE事件处理程序
与 DOM2 级事件处理程序类似,IE 提供了 attachEvent() 和 detachEvent() 方法。不同之处在于,IE 事件处理程序只在冒泡阶段触发。
|
|
注意 IE 事件处理程序,type 要带 on,handler 是事件处理函数。
|
|
优点:
可以一个事件添加多个事件处理程序
HTML 与 JavaScript 代码联系不紧密
缺点: 只有 IE 和 Opera 支持。
跨浏览器事件处理程序
为了兼容所有浏览器,我们可以封装一个事件处理程序:
|
|