第十三章
一、理解事件流
事件流描述的是从页面中接收事件的顺序。
1.事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。以下面的HTML页面为例：
<!DOCTYPE html>
<html>
<head>
<title>Event Bubling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果你单机了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
①<div>
②<body>
③<html>
④document
也就是说，click事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。
2.事件捕获
另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早的接收到事件。如果仍以前面的页面作为演示事件捕获的例子，那么单击<div>元素就会以下列顺序触发click事件。
①document
②<html>
③<body>
④<div>
在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素。
3.DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件的捕获阶段、处于目标阶段和事件冒泡阶段。
二、事件处理程序
1.HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，如下面的例子所示：
<script type = “text/javascript”>
function showMessage（）{
alert（“Hello world！”）；
}
</script>
<input type = “button” value = “Click Me” onclick = “showMessage()” />
在这个例子中，单击按钮就会调用showMessage（）函数。这个函数是在一个独立的<script>元素中定义的，当然代码也可以被包含在一个外部文件中，事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。
这样指定事件处理程序有一些独到之处。首先会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象：
<!—输出“click”-->
<input type=”button” value=”click Me” onclick =”alert(event.type)”>
通过event变量，可以直接访问事件对象，你不用自己定义它，也不用从函数的参数列表中读取。在这个函数内部，this值等于事件的目标元素，例如：
<!—输出”Click Me”-->
<input type=”button” value=”Click Me” onclick=”alert(this.value)”>
关于这个动态创建函数，另一个有意思的地方是它扩展作用域的方式。在这个函数内部，可以像访问局部变量一样访问document及该元素本身的成员。
2.DOM0级事件处理程序
通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
每个元素，都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：
var btn = document.getElementById(“myBtn”) ;
btn.onclick = function() {
alert(“Clicked”) ;
} ;
在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序。使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。来看一个例子：
var btn = document.getElementById(“myBtn”) ;
btn.onclick = function() {
alert(this.id) ; //”myBtn”
} ;
单击按钮显示的是元素的ID，这个ID是通过this.id取得的。
也可以通过删除DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null即可：
btn.onclick = null ； //删除事件处理程序
3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序和函数的一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
使用DMO2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子。
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hello world!");
},false);
通过addEventListener() 添加的事件处理程序只能用removeEventListener()来移除；移除同时传入的参数与添加处理程序时使用的参数相同。这意味着通过addEventListener() 添加的匿名函数将无法移除。
4.IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent（）和detachEvent（）。这两个方法接收相同的2个参数：事件处理程序名称好事件处理程序函数。与DOM方法不同的是：
（1）DOM0级方法事件处理程序会在其所属元素的作用域中运行，而attachEvent（）方法在全局作用域中运行。
（2）attachEvent（）事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。
5.跨浏览器的事件处理程序
第一个要创建的方法是addHandler（），它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件。这个方法属于一个名叫EventUtil的对象，它接受3个参数：要操作的元素、事件名称和事件处理程序函数。
与addHandler（）对应的方法是removeHandler（），它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法。
三、事件对象
1.DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法，都会传入event对象。来看下面的例子：
var btn = document.getElementById(“myBtn”) ;
btn.onclick = function(event)｛
alert（”event.type”）；
}；
btn.addEventListener(“click” ，function(event){
alert（event.type）； //“click”
}，false)；
这个例子中的两个事件处理程序都会弹出一个警告框，显示由event.type属性表示的事件类型。
2.IE中的时间对象
与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。来看下面的例子：
var btn = document.getElementById(“myBtn”) ;
btn.onclick = function() {
var event = window.event ;
alert(event.type) ; //”click”
}；
通过window.event取得了event对象，并检测了被触发事件的类型。
3.跨浏览器的事件对象
虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE中event对象的全部信息和方法DOM对象中都有，只不过实现方式不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。
4.事件类型
（1）UI事件，当用户与页面上的元素交互时触发；
（2）焦点事件，当元素获得或是去焦点时触发；
（3）鼠标事件，当用户通过鼠标在页面上执行操作时触发；
（4）滚轮事件，当使用鼠标滚轮时触发；
（5）文本事件，当在文档中输入文本时触发；
（6）键盘事件，当用户通过键盘在页面上执行操作时触发；
（7）合成事件，当为IEM输入字符时触发；
（8）变动事件，当底层DOM结构发生变化时触发。
（9）变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们。
五、性能和内存
1.事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。以下面的HTML代码为例：
<ul id=”myLinks”>
<li id=”goSomewhere”>Go somewhere</li>
<li id=”doSomething”>Do something</li>
<li id=”sayHi”>Say hi</li>
</ul>
其中包含3个被单击后会执行操作的列表项。按照传统做法，需要像下面这样为它们添加3个事件处理程序。
var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
EventUtil.addHandler(item1,"click",function(event){
location.href="http://www.wrox.com";
});
EventUtil.addHandler(item2,"click",function(event){
document.title="I changed the document's title";
});
EventUtil.addHandler(item3,"click",function(event){
alert("hi");
});
如果在一个复杂的web应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序，如下面的例子。
var list=document.getElementById("myLinks");
EventUtil.addHandler(list,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id){
case "doSomething";
document.title="I changed the document's title";
break;
case "goSomewhere";
location.href="http://www.wrox.com";
break;
case "sayHi";
alert("hi");
break;
}
});
2.移除事件处理程序
每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的javascript代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。如前所述，可以采用事件委托技术，限制建立的链接数量。另外，在不需要的时候移除事件处理程序，也是解决这个问题的一种方案。内存中留有那些过时不用的“空事件处理程序”，也是造成Web应用程序内存与性能问题的主要原因。
在两种情况下，可能会造成上述问题：第一种情况就是从文档中移除带有事件处理程序的元素时。第二种情况就是卸载页面的时候。
六、模拟事件
1.DOM中的事件模拟
可以在document对象上使用createEvent（）方法创建event对象。这个方法接收一个参数，即表示要创建的事件类型的字符串。在DOM2级中所有这些字符串都是使用英文复数形式，而在DOM3级中变成了单数。
（1）模拟鼠标事件
创建新的鼠标事件对象并为其指定必要的信息就可以模拟鼠标事件。创建鼠标事件对象的方法是为createEvent（）传入字符串“MouseEvents”。返回的对象有一个名为initMouseEvent（）方法，用于指定与该鼠标事件有关的信息。这个方法接收15个参数。下面， 我们通过一个例子了解如何模拟对按钮的单击事件：
var btn=document.getElementById(“myBtn”);
// 创建事件对象
var event = document.createEvent(“MouseEvents”);
//初始化事件对象
event.initMouseEvent(“click”,true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//触发事件
btn.dispatchEvent(event);
（2）模拟键盘事件
DOM3级规定，调用createEvent()并传入“keyboardEvent”就可以创建一个键盘事件。返回的事件对象会包含一个initKeyEvent（）方法。
由于DOM3级不倡导使用keypress事件，因此只能利用这种技术来模拟keydown和keyup事件。
var textbox=document.getElementyById(“myTextbox”),event;
//以DOM3级方式创建事件对象
if (document.implementation.hasFeature(“KeyboardEvents”,”3.0”)){
event=document.createEvent(“KeyboardEvent”);
//初始化事件对象
event.initKeyboardEvent(“keydown”,true,true,document.defaultView,”a”,0,”shift”,0);
}
//触发事件
textbox.dispatchEvent(event);
这个例子模拟的是按住shift键的同时又按下A键。
在其他浏览器中，则需要创建一个通用的事件，然后再向事件对象中添加键盘事件特有的信息。例如：
var textbox=document.getElementById(“myTextbox”);
//创建事件对象
var event=document.createEvent(“Events”);
//初始化事件对象
event.initEven(type,bubbles,cancelable);
event.view=document.defaultView’
event.altKey=false;
event.ctrlKey=false;
event.shiftKey=false;
event.metaKey=false;
event.keyCode=65;
event.charCode=65;
//触发事件
textbox.dispatchEvent(event)；
3.模拟其他事件
虽然鼠标事件和键盘事件是在浏览器中最经常模拟的事件，但有时候同样需要模拟变动事件和HTML事件。要模拟变动事件，可以使用createEvent（“MutationEvents”）创建一个包含initMutationEvent（）方法的变动事件对象。例如：
var event=document.createEven(“MutationEvents”) ;
event.initMutationEvent(“DOMNodeInserted”,true,false,someNode,””,””,””,0);
target.dispatchEvent(event);
以上代码模拟了DOMNodeInserted事件。其他变动事件可以按照这个样子来模拟，只要改一改参数。
4.自定义DOM事件
自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建新的定义事件，可以调用createEvent（“CustomEvent”）。返回的对象有一个名为initCustomEvent（）的方法。
2.IE中的事件模拟
调用document.createEventObject()方法可以在IE中创建event对象。这个方法不接受参数，结果会返回一个通用的event对象。然后，手工为这个对象添加所有必要的信息。最后一步就是在目标上调用fireEvent（）方法，这个方法接受两个参数：事件处理程序的名称和event对象。在调用fireEvent（）方法时，会自动为event对象添加srcElement和type属性；其他属性则都必须通过手工添加。