1.1 事件：一般是用于浏览器和用户操作进行交互。也就是说javascript和html之间的交互是通过事件实现的
1.2 事件流：事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
1.3 事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点 ，从里往外逐个触发（IE事件流就是事件冒泡）
1.4 事件捕获：由不具体的节点先接收事件，具体的节点应该最后接收事件，目的是在事件到达预定目标之前捕获它。从外往里逐个触发。很少用
1.5 DOM事件流：
“
DOM2级事件
”规定的事件包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
但是实际的目标在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到<html>再到<body>后就停止了。下一阶段是处于目标阶段，于是事件在<div>上发生，并在事件处理中看成冒泡阶段的一部分。最后，冒泡事件发生，事件又传播回文档。（即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但是很多浏览器都会在捕获阶段接触事件对象上的事件，所以就有两个机会在目标对象上面操作事件）
2.1 事件处理程序：
事件就是用户或浏览器自身执行到某种动作，诸如 click，load，mouseover都是事件的名字。响应某个事件的函数就叫做事件处理程序。
2.2 HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下面这段代码：
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" οnclick="show()"/>
缺点：(1)首先：存在一个时差问题。就本例子来说,假设show()函数是在按钮下方，页面的最底部定义的，如果用户在页面解析show()函数之前就单击了按钮，就会引发错误；
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。
因此，许多开发人员摒弃html事件处理程序，转而使用javascript指定事件处理程序。
2.3 DOM0级事件处理程序
通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
即为指定对象添加事件处理，看下面的一段代码
<input id="btn2" value="按钮" type="button">
<script>
var btn2= document.getElementById("btn2");
btn2.οnclick=function(){
alert("DOM0级添加事件处理");
}
btn.οnclick=null;//如果想要删除btn2的点击事件，将其置为null即可
</script>
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序：
删除DOM0级方法指定的事件处理程序：
btn.οnclick=null; // 删除事件处理程序
优点：简单，具有跨浏览器的优势
缺点：只能实现单个事件的处理程序，
存在一个时差问题
2.4 DOM2级事件处理程序
“
DOM2级事件
”定义了两种方法，用于处理指定和删除事件处理程序的操作：addEventListener（）和remove
EventListener（）
所有DOM节点都包含这两个方法，并且它们都接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。
第三个参数布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认是在冒泡阶段处理。
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
},false);
这两个时间处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
var btn=document.getElementById("mybtn");
var hander=function(){
alert(this.id);
};
btn.addEventListener("click",hander,false);
var hander=function(){
alert(this.id);
};
btn.addEventListener("click",hander,false);
btn.removeEventListener("click",hander,false); // 有效
缺点：addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同
优点：可以添加多个事件处理程序
2.5 IE事件处理程序
IE有两个方法：attachEvent() 和 detachEvent() .这两个方法接收相同的两个参数：事件处理程序名称与事件处理程序函数。
通过attachevent() 添加的事件处理程序都会被添加到冒泡阶段。
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world!");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world!");
});
这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。这些事件处理程序不是以它们的添加顺序执行，而是以相反的顺序被触发。
var btn=document.getElementById("mybtn");
var hander=function(){
alert("clicked");
}
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // 移除
使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。
2.6 跨浏览器的事件处理程序
为了以跨浏览器的方式处理事件，有两种方式，第一种是会直接使用能够隔离浏览器差异的javascript库，另一种会自己开发最合适的事件处理方法。
EventUtil这个对象来处理浏览器间的差异。其中有两个方法。addHandler()和removeHandler().它们的目的是视情况分别使用DOM0级方法，DOM2级方法或者IE方法来添加或者删除事件。它们接受三个参数：要操作的元素，事件名称和事件处理程序函数。
3.1 事件对象
只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他事件有关的信息。
3.2 DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象。
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的方法和属性也不一样。不过，所有事件都会有以下成员：
3.3 IE中的事件对象
IE的event对象同样也包含与创建它的事件相关的属性和方法。
3.4 跨浏览器的事件对象
虽然DOM和IE中的event对象不同，但是IE中event对象的全部信息和方法DOM对象中都有，只不过实现方式不一样。所以可以设计出跨浏览器的方案来。
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
