JavaScript与HTML之间的交互是通过事件完成的。
可以使用事件侦听器来预订事件，正在传统软件工程中被称为观察员模式
观察员模式支持页面行为与外观的松散耦合
ECMAScript因DOM而丰富多彩，因IE而烦的一笔
零、事件流
事件流描述的是从页面中接收事件的顺序，有趣的是，IE和Netscape居然采用了几乎相反的事件流。IE为冒泡流，Netscape Communicator采用捕获流（虽然现在很少使用），下面介绍下二者的定义，以及DOM标准的事件流
- 冒泡流
事件流，即事件开始时由最具体的元素接收，然后逐层向上传播到父节点（文档），例如：
<div> => <body> => <html> => Document
下面列出冒泡流的图示：
找不到图，，， 算了算了
需要注意的是，IE5.5级更早版本的事件冒泡会跳过<html>元素，从<body>直接跳到document对象。
- 捕获流
捕获流与冒泡流相反，即先从不具体的对象出发，逐渐定位至最具体的对象。
现在很少有人使用捕获流，因此可以放心的使用冒泡流。
- DOM事件流
DOM事件流做出如下规定：
- “DOM2级事件”规定了事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
- DOM事件流中，事件捕获阶段不会接收到事件，即在捕获阶段不涉及到目标对象，下一个阶段为处于目标阶段，因此事件处理可以看成冒泡流的一部分。
- 但是IE9、Safari、Chrome、Firefox、Opera9.5及更高版本在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上触发事件（DOM2方法中
addEventListener中的第三个参数true/false便可决定触发事件发生在哪个阶段）
一、事件监听器
事件处理程序又叫事件监听器，是响应浏览器事件的函数，事件监听器的名字以on开头。
按类型分，大致可以分为：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序
HTML事件处理程序
通过与相应事件处理程序同名的HTML特性来制定事件监听器的方法叫做HTML事件处理程序，其中，特性的值为相应的HTML代码。需要注意以下几点：
- 镶嵌在HTML中的JavaScript代码不能使用未经转义的HTML语法字符，如
&``""``<``>。若要使用这些字符，需使用转义字符。 - 事件处理程序中的代码在执行时，有权限访问全局作用域中的任何代码，且这个函数类似于使用with扩展作用域
- 在事件处理程序内部，
this指向事件的目标元素 - 允许跨表单字段访问，无需引用表单元素就能访问其他表单字段
- 由于时差，作用域链，紧密耦合的原因，最好减少使用
DOM0事件处理程序
方式：将一个函数赋值给一个元素（或对象）的事件处理程序属性，并且事件处理程序是在元素的作用域中进行的。
element.onkeydown = function(){}
- 以DOM0级事件处理程序会在事件流的冒泡流中进行
- 删除通过DOM0级方法制定的事件处理程序的方法
element.onclick = null;
DOM2级事件处理程序
DOM2级定义了两个方法addEventListener()和removeEventListener()，接收三个参数：要处理的事件名，作为事件处理程序的函数，在捕获阶段调用事件处理程序（true）还是在冒泡阶段调用事件处理程序（false）
element.addEventListener('click',function(){},false)
- DOM2级方法添加事件处理程序的运行顺序是按照添加顺序的
- 匿名函数无法被`removeEventListener·移除
- 一般都是讲布尔值设置为
false，这样可最大限度兼容各种浏览器
IE事件处理程序
关于IE事件处理程序，这里主要讲下与DOM级事件处理成序的区别
element.attachEvent('onclick',function(){}) //事件名称+on
- 包含两个方法：
attachEvent，detachEvent，接受两个参数：事件处理程序名称，事件处理程序函数，此处事件处理程序名称要加on。注意，IE8级更早版本只支持冒泡流 - 使用IE方法时，函数作用域为全局作用域，this指向window
- IE方法添加的事件处理程序以相反的顺序被触发（与DOM相反）
二、事件对象
注意区分JavaScript中最重要的两个对象：目标对象和事件对象，目标对象对应于事件流中的被触发的目标元素或文档，事件对象对应于触发事件时传入事件监听器的参数。事件对象包含着所有与事件有关的信息，包括事件的目标元素，事件的类型及其他与特定事件相关的信息。
DOM事件对象
兼容DOM的浏览器会将一个event对象传入事件处理程序
element.onkeydown=function(event){
alert(event.type)}
利用event对象可以实现许多功能，如通过一个函数处理多个事件，防止事件默认行为，防止触发连带事件处理程序。具体见《JavaScript高级程序设计》
IE事件对象
IE中同样存在event对象，不过对象有几种存在的方式，如何调用取决于事件处理程序的类型：
- DOM0级方法中，event对象作为window对象的一个属性
- IE事件程序中，event既可直接调用，也可使用window对象访问。
三、跨浏览器兼容
为了解决跨浏览器兼容问题，大家可以使用能够隔离浏览器差异的JavaScript库，也可以利用能力检测自己制作一个兼容脚本
下面是兼容的脚本
var EventUtil={
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if(element.attachElement){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=handler;
}
},//添加事件处理程序
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){
element.detachEvent('on'+type,handler)
}else{
element['on'+type]=null;
}
},//移除事件处理程序
getEvent: function(event){
return event?event:window.event;
},//获取事件对象
getTarget: function(event){
return event.target || event.srcElement;
},//获取目标对象
preventDefault: function(event){
if(event.preventDefault()){
event.preventDefault()
}else{
event.returnValue = null;
}
},//防止事件默认行为
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation()
}else {
event.cancelBubble;
}
}
};
四、事件类型
DOM3级事件规定了以下事件：
- UI事件：当用户与页面上的元素交互时触发
- 鼠标事件： 当用户通过鼠标在页面上执行操作时触发
- 滚轮事件：当使用鼠标滚轮（或类似设备时触发）
- 文本事件： 挡在文档中输入文本时触发
- 键盘事件
- 合成事件：当为IME（Input Method Editor，输入法编辑器）输入字符时触发
- 变动事件： 当底层DOM结构发生变化时触发
网友评论