javascript与html之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预定事件,以便时间发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript代码)与页码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript代码)与页面的外观(HTML和CSS代码)之间的松散耦合。
一、事件流
事件流描述的是页面中接收事件的顺序。
1 事件冒泡
IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。
2 事件捕获
事件捕获的思想是不太具体的节点应该更早接受到事件,而最具体的节点应该最后接收到事件。
3 DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获节点、处于目标阶段和事件冒泡阶段。
二、事件处理程序
1 HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。
在HTML中指定事件处理程序的缺点如下。
- 存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件。
- 扩展事件处理程序的作用域链在不同的浏览器中会导致不同的结果。不同JavaScript引擎遵循的标识符解析规则略有差异,很可能会在访问非限定对象成员时出错。
- HTML与JavaScript代码紧密耦合。
2 DOM0级事件处理程序
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序会在事件流的冒泡阶段被处理。
3 DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListenter()和removeEventListener()。所有DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
与DOM0级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。
4 IE事件处理程序
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
三、事件对象
1 DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event对象。
在通过HTML特性指定事件处理程序时,变量event中保存着event对象。
所有事件都会都会有下表列出的成员。
属性/方法 | 类型 | 读/写 | 说明 |
bubbles | Boolean | 只读 | 表明事件是否冒泡 |
cancelable | Boolean | 只读 | 表明是否可以取消事件默认行为 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件那个元素 |
defaultPrevented | Boolean | 只读 | 为true表示已经调用了preventDefault()(DOM3级事件中新增) |
detail | Integer | 只读 | 与事件相关的细节信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段 |
preventDefault() | Function | 只读 | 取消事件的默认行为。如果cancelable是true,则可以使用这个方法 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增) |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法 |
target | Element | 只读 | 事件的目标 |
trusted | Boolean | 只读 | 为true表示事件是浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增) |
type | String | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
在事件处理程序的内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。
2 IE中的事件对象
与访问DOM中的event对象不同,要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。
如果事件处理程序是使用attachEvent()添加的,那么就会有一个event对象作为参数被传入事件处理程序函数中。
所有事件对象都会包含下表所列的属性和方法。
属性/方法 | 类型 | 读/写 | 说明 |
cancelBubble | Boolean | 读/写 | 默认值为false,但将其设置为true就可以取消事件冒泡 |
retureValue | Boolean | 读/写 | 默认值为true,但将其设置为false就可以取消事件的默认行为 |
srcElement | Element | 只读 | 事件的目标 |
type | String | 只读 | 被出发的事件的类型 |
四、事件类型
Web浏览器中可能发生的事件有很多类型。如前所述,不同的事件类型具有不同的信息,而“DOM3级事件”规定了以下几类。
- UI(User Interface,用户界面)事件,当用户与页面上的元素交互时出发;
- 焦点事件,当元素获得或失去焦点时触发;
- 鼠标事件,当用户通过鼠标在页面上执行操作时触发;
- 滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
- 文本事件,当在文档中输入文本时触发;。
- 键盘事件,当用户通过键盘仔页面上执行操作时触发;
- 合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
- 变动(mutation)事件,当底层DOM结构发生变化时触发。
1 UI事件
现有的UI事件如下:
- DOMActivate:表示元素已经被用户操作(通过鼠标或键盘)激活。这个事件在DOM3级事件中被废弃。
- load:当页面完全加载后在window上面触发,当所有框架都加载完毕时在框架集上面触发,当图像加载完毕时在<img>元素上面触发,或者当嵌入的内容加载完毕时在<object>元素上面触发。
- unload:当页面完全卸载后在window上面触发,当所有框架都卸载后在框架集上面触发,或者当前软的内容卸载完毕后在<object>元素上面触发。
- abort:在用户停止下载过程时,如果嵌入的内容没有加载完,则在<object>元素上面触发。
- error:当发生JavaScript错误时在window上面触发。
- select:当用户选择文本框(<input>或<textarea>)中的一或多个字符时触发。
- resize:当窗口或框架的大小变化时在window或框架上面触发。
- scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发。<body>元素中包含所加载页面的滚动条。
2 焦点事件
- blur
- DOMFocusIn
- DOMFocusOut
- focus
- focusin
- focusout
3 鼠标与滚轮事件
- click
- dblclick
- mousedown
- mouseenter
- mouseleave
- mouseenter
- mouseout
- mouseup
4 键盘与文本事件
有三个键盘事件,简述如下:
- keydown
- keypress
- keyup
在用户按了一下键盘上的字符键时,首先会触发keydown事件,然后紧跟着是keypress事件,最后会触发keyup事件。其中keydown和keypress都是在文本框发生变化之前被出发的;而keyup事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放,就会重复触发keydown和keypress事件,知道用户松开改键为止。
1)键码
2)字符编码
3)DOM3级变化
五、内存和性能
1 事件委托
2 移除事件处理程序
六、模拟事件
1 DOM中的事件模拟
可以在document对象上事件createEvent()方法创建event对象。这个方法接受一个参数,即表示要创建的事件类型的字符串。在DOM2级中,所有这些字符串都是用英文负数形式,而在DOM3级中都变成了单数。这个字符串可以是下列几个字符串之一。
- UIEvents
- MouseEvents
- MutationEvents
- HTMLEvents
2 自定义事件
DOM3级还定义了“自定义事件”。自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。
- type(字符串):触发的事件类型,例如“keydown”。
- bubbles(布尔值):表示事件是否该冒泡。
- cancelable(布尔值):表示事件是否可以取消。
- detail(对象):任意值,保存在event对象的detail属性中。