事件
之前写了写事件对象的问题，算是把事件中的事件对象给搞明白了。前两天把常用的有关事件的知识点又看了一遍，现在整理一下，谨记！！
一、事件流
事件流是从页面中接受事件的顺序。但是IE和网景两家公司提出了截然相反的事件流概念。
IE的是事件冒泡，现在常用的事件流方式，网景是事件捕获，在有特殊需求时在对事件做出响应。
一、1.事件冒泡 ：事件开始时有最剧本的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件冒泡图
2.事件捕获
事件捕获的思路是不太具体的节点应该更早接收到事件，而具体的节点应该最后接收到事件。与IE的相反。其用意是在事件还没达到预定目标时捕获它。
二、DOM事件流
DOM2级事件：的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
首先发生的是事件捕获，为截获事件提供了机会。然后是实际目标接收到事件。最后一个阶段是冒泡阶段，在这个阶段对事件做出响应。
三、事件处理程序
响应某个事件的函数就叫做事件处理程序（事件侦听器）。为事件指定处理程序的方式有好几种：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序
1.某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。
（指定事件处理程序）
<script type="text/javascritp">
function showMessage(){
alert("hello world!")
}
</script>
<input type="button"/ value="click me" onclick="showMessage()">
事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。
指定事件处理程序具有一些独到之处。首先，这样会创建一个封装着元素属性值得函数。这个函数中有一个局部变量event，即事件对象。通过event变量，可以直接访问事件对象，不用再次定义它，也不用从函数的参数列表中读取。可以在函数内部，用this访问。此时的this值等于事件的目标元素。
<input type="button" value="Click me" onclick ="alert(this.value)"> //Click me （HTML事件处理程序）
这个动态创建的函数，另外一点是它是扩展作用域的方式。在函数内部，可以像访问局部变量一样访问document以及该元素本身的成员。这个函数使用with像下面这样扩展作用域：
function(){
with(document){
with(this){
//元素属性值
}
}
}
这样事件处理程序要访问自己的属性就简单多了。
如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，如下：
function(){
with(document){
with(this){
//元素属性值
}
}
}
这样扩展作用域的方式，是让事件处理程序无需引用表单元素就能访问其他表单字段。
<form method="post">
<input type="text" name="username" value=""/>
<input type="button" value="Echo username" onclick="alert(username.value)">
</form>
在HTML中指定事件处理程序有两个缺点：首先，存在时差问题。解决办法：1.需将调用的函数放在底部。2.很多HTML事件处理程序都会被封装在一个try-catch块中。以便错误不会浮出水面。如下：
<input type="button" value="Click Me" onclick="try{showMessage()}cath(ex){}"/>
如果在showMessage()函数定义之前单击了按钮，用户将看不到JavaScript错误，因为在浏览器有机会处理错误之前，错误就被捕获了。
另外一个缺点是，扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
通过HTML指定事件处理程序的最后一个缺点是，HTML与JavaScript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和JavaScript代码，所以很多人都不使用HTML事件处理程序，而使用JavaScript指定事件处理程序。
四、DOM0级事件处理程序
JavaScript指定事件处理程序：将一个函数赋值给一个事件处理程序属性。
其优点：1.简单。 2.具有跨浏览器的优势。
要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象引用。
var btn = document.getElement("myBtn");
btn.onclick = function(){
alert("clicked");
};
使用此种方法指定的事件处理程序被认为是元素的方法，因此此时的事件处理程序时在元素的作用域中运行，这时程序中的this引用当前元素。
var btn = document.getElement("myBtn");
btn.onclick = function(){
alert(this.id); //myBtn
}
实际上可以在事件处理程序中通过this访问元素的任何属性和方法。这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序：btn.onclick = null;
五、DOM2级事件处理程序
DOM2级事件中有两个方法，addEventListener( )和removeEventList( )，分别用于处理指定和删除事件处理程序。所有DOM节点中都包含这两个方法，它们接收3个参数：要处理的事件名（click,...,..）、事件处理程序函数、布尔值。最后的参数（布尔值），如果是true，表示在捕获阶段调用处理程序函数；如果是false，表示在冒泡阶段调用事件处理程序。
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
},false),
btn.addEventListener("click",function(){
alert("Hello world!") ;
},false);
此时事件处理程序会按照添加它们的顺序触发。（myBtn > Hello world!）。
通过addEventListener( )添加的事件处理程序只能使用removeEventListener( )移除，移除是传入的参数与添加处理程序时使用的参数相同，通过addEventListener( )添加的匿名函数将无法移除。
ps：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段（false）。
六、IE事件处理程序
IE并不支持addEventListener( )和removeEventListener( )方法，它自己有两个类似的方法：attachEvent( )和detachEvent( )，这两个方法接收两个参数：事件处理程序名称和事件处理程序函数。由于IE8以及更早版本只支持事件冒泡，所以通过attachEvent( )添加的事件处理程序都会被添加到冒泡阶段。
attachEvent( )方法也可以为一个元素添加多个事件处理程序。
var btn = document.getElementById("myBtn");
btn.attacheEvent("onclick" ,function(){
alert("clicked");
});
btn.attachEvent("onclick", function(){
alert("Hello world");
});
addEventListener()是由上而下的顺序执行的，而attachEvent()的触发顺序恰恰相反。（Hello world > clicked）
在使用attachEvent( )方法情况下，事件处理程序会在全局作用域中运行，此时的this等于window。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window) ; //true
});
使用attacheEvent( )添加的事件通过detachEvent（）来移除。也是要提供相同的参数，匿名函数不能移除。不过，可以将相同函数的引用传递给detachEvent(),就可以将相应的事件处理程序。
var btn = document.getElement("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler)；
七、跨浏览器的事件处理程序
var EventUtil = {
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent("on" + type, handler)
}
},
removeHandler:function(element, type, hander){
if(element.removeEventListener){
element.removeEventListener(type, handler, false)
}else if(element.detachEvent) {
element.detachEvent("on" + type, handler);
}
}
}
调用EventUntil对象：
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);
