事件处理程序
- 概念:
事件 就是用户或者浏览器自身执行的某种动作(其实在 事件流 那一篇中已经介绍过 事件 的概念了)。
所以什么是 事件处理程序 呢?响应某个事件的函数就叫做 事件处理程序 (或 事件侦听器)。事件处理程序 的名字通常以on
开头。 - 组成:
- HTML 事件处理程序
- DOM0 级事件处理程序
- DOM2 级事件处理程序
- IE 事件处理程序
HTML 事件处理程序
- 概念:
HTML 事件处理程序 就是我们常说的行内执行的 Javascript。在《高级javascript程序设计》中解释为:某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的 HTML 特性来制定。这个特性的值应该是能够执行的 Javascript 代码。
1 | <input type="button" value="Click Me" onclick="alert('Clicked')" /> |
- 缺点:
- 存在一个时差问题。例如:函数在元素下方、页面最底部定义,用户在页面解析函数之前想要触发事件,这会引发错误。解决方法是外层包裹
try catch
语句,在浏览器处理错误之前就捕获错误事件。 - 扩展事件的作用域链在不同浏览器中会导致不同结果。不同 Javascript 引擎 遵循的标识符解析规则略有差异,很可能在访问非限定对象成员时出错。
- HTML 和 Javascript 的代码紧密耦合。更换事件处理程序,就要改两个文件。
- 支持:
所有浏览器都支持!
综上,尽量不要使用行内 Javascript。
DOM0 级事件处理程序
- 概念:
DOM0 级事件处理程序 就是将一个函数赋值给另一个事件处理程序属性。在第四代浏览器中出现,一直沿用至今,并且所有浏览器都支持。而且每个元素(包括window
和document
)都有自己的处理程序属性,这些属性通常全部小写。例:onclick
。
1 | var btn =document.getElementById('myBtn'); |
- 特点:
- 在这些代码运行以前不会指定事件处理程序,所以在处理程序代码解析之前用户不能触发事件处理程序。
- 使用 DOM0 级方法指定事件处理程序被认为是元素的方法。此时的事件处理程序是在元素的作用域中进行的。
- 程序中的
this
指向引用的当前元素。可以使用this
访问元素的任何属性和方法。 - 不可以为一个元素添加多个方法,因为会根据优先级覆盖,只有最后添加的方法有效。
⚠️注意:以 DOM0 级方法添加的事件处理程序会在事件流的 冒泡阶段 被处理
- 移除事件:
1 | btn.onclick = null; |
DOM2 级事件处理程序
概念:
DOM2 级事件定义了两个方法。处理指定:addEventListener()
;删除事件:removeEventListener()
。参数:
这两个方法都接受三个参数:
- 要处理的事件名
- 作为事件处理程序的函数
- 布尔值(
true
表示在捕获阶段调用事件处理程序;false
表示在冒泡阶段调用事件处理程序)强烈推荐false
!!因为大多数浏览器都支持事件冒泡,尽量做到兼容大多数浏览器。 this
指向引用的当前元素
⚠️注意:
1. 可以添加多个事件,执行顺序按照添加顺序执行
2.
3.
1. 可以添加多个事件,执行顺序按照添加顺序执行
2.
addEventListener()
添加的事件只能使用 removeEventListener()
来删除,且参数必须一致3.
addEventListener()
添加的匿名函数,使用 removeEventListener()
是删除不了的!!1 | var btn = document.getElementById('myBtn'); |
- 支持:
IE9、Firefox、Chrome、Opera、Safari 目前支持
IE 事件处理程序
概念:
IE 在 DOM 中实现了两个方法:attachEvent()
,detachEvent()
;参数:
- 事件处理程序的名称
- 事件处理程序函数
IE8 以及更早版本只支持事件冒泡,所以通过
attachEvent
添加的事件处理程序都会被添加到冒泡阶段。- 特点:
- 也可以为一个元素添加多个事件处理程序。
- 但触发顺序跟 DOM2 级方法的顺序相反。
- 添加的匿名函数不能被移除
this
指向window
与 DOM0 级方法的区别:
attachEvent()
添加的事件this
指向window
; DOM0 级添加的事件this
指向引用的当前元素。支持:
只有 IE 和 Opera 两个浏览器支持。