事件
什么是事件？
众所周知，我们在写页面时候有时会用到一些交互，而交互通常是在JavaScript与HTML之间进行的，进一步说，他们两个的交互就是通过事件进行的。
那么，说了半天事件到底是什么。
答案即将揭晓。。。
事件就是，文档或者浏览器窗口发生的一些特定的交互瞬间。
是不是有点失望，没事，正常，干货即将到达战场，请做好瞎混的准备?
(一)事件流
事件流描述的是从页面接受事件的顺序。
但是有两个团队提出了两个事件流的概念，分别是IE和Netscape开发团队。
但是两者有什么区别呢？
这么说吧，
这两个几乎完全不一样。
事件冒泡
事件冒泡（event bubbling ），是事件开始时由最具体的元素（文档嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点。
比如有这样一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>
那么Click事件的传播顺序是：
（1）<div>
（2）<body>
（3）<html>
（4）document
就是说在<div>元素上发生了Click事件,那么这个元素就会沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象上。
现代浏览器都支持事件冒泡，除了IE5 及以前的更早版本的浏览器
事件捕获
事件捕获的思想是不太具体的节点应该比具体的节点更早接收到事件，所以它其实就是事件冒泡的相反例子。
唯一作用：可以在事件达到预期效果之前捕获事件。
事件捕获仅仅有事件捕获流模型支持但是从IE9开始各大主流浏览器都支持该种事件流模型。
由于其兼容性差，比较常用的还是事件冒泡。
DOM事件流
“DOM2级事件”规定的事件流有三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
1.事件捕获阶段：为捕获事件提供机会。
2.接收事件的过程。
3.事件冒泡阶段：页面对事件进行响应。
（二）事件处理程序
什么是事件处理程序？
说到这里了，我们现在肯定都知道事件是什么了吧！！！！
时间就是浏览器在执行某一特定交互时，产生的反应。那么，这个反应由谁来执行，这就是事件处理函数的作用了。
事件处理函数就是响应某个事件的函数，从而达到某种效果或者是某种变化的函数，它也被叫做事件侦听器。
HTML事件处理程序
在我看来HTML事件处理程序就类似于我们在学习CSS时使用的内嵌式CSS，即是在HTML标签内部写JS代码。
来举一个?吧：
下面图片中的代码就是一个简单的HTML事件处理程序，代码在用户点击按钮之后弹出警告框，提示相关文字。
结果如下图显示:
但是这种方法由于在HTML代码中，所以相对应的代码之间的区别还是需要注意。
比如一些常用的符号，"<"，">"，" “” “（双引号），” &"。等等
但是，并不是全然无用的。
这个方法会封装一个函数，其中封装着元素属性值，在这个函数中还有一个局部函数变量event，也就是事件对象。通过这个函数对象，你可以直接访问到其他元素成员。
<input type="button" value="Click me!" onclick=alert("this.vaule")">
其中的this等于事件的目标元素。（但是不一定在所有的函数中都成立）
<input type="button" value="Click me!" onclick="alert(event.type)">
但是，当函数未加载完成时，点击交互就会出现错误，但是将函数封装就会避免这种未加载的情况，错误会被提前捕获，从而不会发生。
使用这个HTML事件处理程序有一个致命的缺点就是HTML与JavaScript代码高度耦合，如果有部分出错，那么改动将会变得特别多，所以我们更常用javascript代码。
DOM0级事件处理程序
这是用JavaScript指定事件的传统方式，就是将一个函数赋值给一个事件处理程序属性。
每一个元素(包括window和document)都有自己的事件处理程序属性，这些属性通常是小写的。
例子如下：
var btn=document.getElementsById("myBtn");
btn.onclick=function(){
alert("Click!")
}
将这种属性的值设置为一个函数，就可以指定时事件处理程序，我们在这里指定了一个onclick事件处理程序，单击按钮后会弹出警告框提示Click，
使用这个方法对于每一个元素仅仅可以添加一个事件处理程序。
使用的严谨格式为：元素.on+type=函数(){语句}
那么如何删除这个事件处理函数呢？
答案是。将这个属性的值直接赋空就行了。简单吧；；
btn.onclick=null;
将事件处理程序设置为null之后，再次单击按钮将不会有任何动作发生。
DOM2级事件处理程序
DOM2级事件中有两个方法，用于指定和删除事件处理程序：addEventListener()he removeEventListener()。
这两种方法比较相似，都接收三个参数：要处理的事件名、作为事件处理的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；布尔值参数如果为false,就表示在冒泡阶段调用事件处理程序。
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
这段代码的含义是，为按钮添加一个onclick事件处理函数，并且这个事件处理函数会在冒泡阶段被触发（最后一个参数为false）。
这个方法可以添加多个事件处理程序。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，但是两种方法的参数完全相同，但是通过前一种方法添加的匿名函数无法使用对应方法进行移除，即函数名必须相同。
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.removeEventListener("click",function(){ //没有用
alert(this.id);
},false);
大部分时候，我们都会将事件处理程序添加到事件流的冒泡阶段，因为这样的兼容性强。
IE事件处理程序
类似于DOM中的类似方法：
attchEvent()和dettchEvent()，这两个方法接受两个参数：事件处理程序名称、事件处理程序函数。
IE8及以前的版本的只支持事件冒泡，所以通过这种方法添加的事件处理程序之火被添加到冒泡阶段。
var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(){
alert("Click!");
});
这种方法与DOM0级方法的主要区别是事件处理程序的作用域不同，DOM0级事件处理程序下，事件处理程序会在其所属元素的作用域内运行；在使用attcchEvent()方法时，事件处理程序会在全局作用域中运行
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
