JavaScript 之事件

1.事件：指文档或者浏览器窗口中发生的一些特定的交互瞬间。
2.事件流：指从页面中接收事件的顺序。（IE的事件流是冒泡流，Netscape communicator的事件流是事件捕获）

事件冒泡和事件捕获

1）事件冒泡：是指事件开始由最具体的元素接收，然后逐级向上传播到最不具体的节点。
2）事件捕获：是指事件开始由最不具体的节点接收，然后向下传播到最具体的节点。
3）事件捕获的用意：在事件到达预定目标之前捕获它。
4）由于版本支持不太友好，建议只有在需要的时候使用事件捕获，而大多数时候使用事件冒泡。

DOM事件流

DOM2级事件规定的事件流包括：事件捕获阶段、处于目标阶段、事件冒泡阶段。
首先是事件捕获，为捕获事件提供了机会，然后是实际的目标接收待事件，最后就是事件冒泡阶段，可以在冒泡阶段对事件作出响应。
例如：

事件处理程序

响应某个事件的函数叫做事件处理程序

1）HTML事件处理程序：某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
例如：

<input type="button" value="Click" "alert('Clicked')" />
这个操作是通过指定input的onclick特性并将一些JavaScript代码作为它的值来定义的。

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以包含调用在页面其他地方定义的脚本。
例如：

<script type="text/javascript">
	function showMessage() {
		alert('Hello world");
	}
</script>
<input type="button" value="Click" "showMessage()" />

这样会创建一个封装着元素属性值的函数，这个函数中有一个局部变量：event。
通过event，你可以直接访问事件对象。
例如：

<input type="button" value="Click Me" "alert(event.type)" /> //click

在这个函数内部，this值等于事件的目标元素
例如：

<input type="button" value=" click Me" "alert(this.value)" />
输出：click Me

这个函数的另一个有意思的地方是：它扩展作用域的方式。
在这个函数内部，可以像访问局部变量一样访问document及该元素本身的成员。
如果当前元素是一个表单输入元素，那么作用域中还会包含访问表单元素（父元素）的入口。
例如：

<form method="post">
	<input type="text" name="username" value="" />
	<input type="button" value="Echo Username" "alert(username.value)" />
</form>
 这里单击就会显示文本框中的文本。

在HTML中指定事件处理程序的缺点：（1）时差问题；（2）在不同的浏览器中会导致不同的结构；（3）HTML与JavaScript代码紧密耦合。

2）DOM0级事件处理程序（在冒泡阶段被处理）
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。（每个事件只支持一个事件处理程序）
例如：

 	var btn = document,getElementById("myBtn");
    btn.onclick = function() {
    	alert("Hello world"); 
    }
    注意：在这些代码运行之前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，
    有可能在一段时间内怎么点击都没有反应。

DOM0级事件处理程序也被认为是元素的方法。
因此，这时候的事件处理程序是在元素的作用域中执行的，this引用当前元素。

btn.onclick = null; //删除事件处理程序

3）DOM2级事件处理程序
addEventListener()和removeEventListener()
参数：要处理的事件名，事件处理程序的函数，一个布尔值（true：表示在捕获阶段调用事件处理程序；false：表示在冒泡阶段调用）
例如：

var btn = document,getElementById("myBtn");
btn.addEventListener('click', function() {
	alert(this.id); 
},false);

好处：可以添加多个事件处理程序。
注意：移除事件处理程序的时候参数要和addEventListener()参数一致。（通过匿名函数添加的事件处理函数不能被移除）

4）IE事件处理程序
attachEvent()和detachEvent()
参数：事件处理程序名称，事件处理程序函数
例如：

 var btn = document,getElementById("myBtn");
 btn.attachEvent('onclick', function() {
    	alert("clicked"); 
 });

与DOM0级方法的主要区别是：事件处理程序的作用域。
在DOM0级方法的情况下：事件在元素的作用域内运行；
在attachEvent()方法的情况下：事件处理程序会在全局作用域中运行，因此this等于window。
例如：

 var btn = document,getElementById("myBtn");
 btn.attachEvent('onclick', function() {
 	alert(this === window); // true 
 });
 在编写跨浏览器代码时，牢记这一区别非常重要！

这一方法也可以用来为一个元素添加多个事件处理程序，它们的执行顺序和添加他们的顺序相反。

5）跨浏览器的事件处理程序
要保证处理事件的代码能够在大多数浏览器下一致地运行，只需要关注冒泡阶段。
第一个要创建的方法是：addHandler();它的职责是：视情况分别使用DOM0、DOM2、或IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。
参数：要操作的元素，事件名称，事件处理程序函数