js事件和事件委托详解

js和html之间的交互是通过事件来实现的。ie9、Firefox、Opera、Safari、Chrome已经全部实现了“Dom2级事件”。

一.事件流

1.事件冒泡（IE）

IE的事件流叫事件冒泡，事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，逐级向上传播到最不具体的最外层的节点（Document文档）。

2.事件捕获（Netscape）

另一种事件流叫事件捕获，是由最不具体的最外层的节点（Document文档）接收事件，最具体的节点（实际目标）最后接收事件。

3.Dom事件流

规定的事件流包括三个阶段：事件捕获阶段、目标阶段、事件冒泡阶段。
首先发生的是事件捕获阶段，捕获阶段任务是为截获事件提供机会，建立事件传递路线，以便冒泡阶段顺着这条路返回window.
然后是实际的目标接收事件，事件在该阶段发生，在事件处理中被看成是冒泡阶段的一部分。所以事件是在冒泡阶段发生的。
最后阶段是冒泡阶段，在这个阶段对事件作出响应。

二.事件处理程序

事件就是用户或浏览器自身执行的某种动作(如click、load、mouseover)。这都是事件的名字。而响应事件的函数叫事件处理程序(或叫事件侦听器)。事件处理程序的名字是以“on”开头(如onclick、onload)。为事件指定处理程序的方式有好几种。

1.HTML事件处理程序

又叫html内联属性，即直接在html标签上绑定事件。

<input type="button" value="Click me" onclick="alert(event.type)">

HTML事件处理程序方式通过event变量，可以直接访问事件对象.
this值等于事件的目标元素。
缺点：
1.触发时差
2.html和js代码紧密耦合，不易维护

2.DOM属性绑定

又叫DOM0级事件处理程序，使用这种方式首选要获取一个要操作的元素对象的引用。
每个元素（包括window和document）都有自己的事件处理程序的属性（如onclock），将属性的值设置为一个函数，就可指定事件处理程序。
DOM0级方法指定的事件处理程序被认为是元素的方法。所以函数中this引用的是当前的元素。

	var btn = document.getElementById("myBtn");
	btn.onclick = function(){
		alert(this.id) //myBtn
	}	
	

Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。
Event.target属性返回原始触发事件的那个节点，即事件真正发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象。