事件绑定，以及事件冒泡，事件捕获

当我们想去操作html文档中的某个元素，使其发生某种变化时，这都少不了事件绑定。

今天主要想写一下最基本的一些用法和注意点。

第一，事件绑定

（1）在元素的标签中，使用 on+事件名的方法。此种方法简单，也不存在什么兼容问题，但是没有实现代码分离，且只能绑定一个函数。

1.1在html中

（2）第二种方法与第一种方法类似，只是事件绑定放到了js中。这实现了代码分离，也很简单。但是功能较弱，也只能实现一个函数的绑定。

1.2 在js中使用.on事件名的方法

（3）添加事件监听

这种方法，addEventListener可以同时绑定多个函数，在W3C标准下，为先绑定先执行。此外，此方法还有其它优点,可以在第三个参数下，指定是在事件冒泡时执行，还是事件捕捉时执行。此外，第二个参数，如果我们直接写一个函数，在函数中传入事件（e),我们可以直接捕捉到触发事件。最后还有一个注意点，就是函数体中的this,是添加事件监听前的元素。

这种方法优点这么多，所以我们自然优先选择这种方法，但是要注意，IE 不支持，要使用attachEvent.

1.3 addEventListener

第二 jQuery中的事件绑定

由于jQuery的使用频度较高，这里简略提一下jQuery中我们常用的事件绑定方法。

（1）$(选择器).bind(事件类型，[data],function(){}); 

（2） 可以将上述简写成，$(选择器).事件(function(){}); 

eg.  a.click(function(){ alert("a is clicked");});

（3）使用on. 

on(type,[selector],[data],fn)

这里有较为详细一些的，关于jQuery中的事件绑定 http://www.51edu.com/it/bckf/35687.html

第三，事件冒泡，事件捕获以及应用。

1)冒泡事件

冒泡事件如其名字，是从一个具体的元素的事件的触发，逐渐扩散到最不具体的事件目标(document)。我们最常用的一个应用，就是如果多个元素需要触发相同事件，或者动态添加某些元素导致无法绑定事件时，可以将事件触发绑定到父元素上，这样在子元素上的事件也会使父元素触发相应函数，这就叫做事件委托。

2）事件捕获

定义与事件冒泡相反，就是从最不具体的事件逐级捕获到最具体的事件。

3） 事件流

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。在addEventListener中，将第三个参数设置为false,则是在冒泡事件中执行。这与IE默认的事件模型一致。

参考文章：

事件绑定：

http://www.cnblogs.com/ninofocus/archive/2012/11/07/2758772.html

http://www.itxueyuan.org/view/6338.html

冒泡及事件流：http://www.jb51.net/article/42492.htm