JavaScript事件的绑定与传播

（一）JavaScript事件的绑定

使用对象， 事件 = 函数形式绑定事件

它只能同时为同一个元素绑定同一个事件一次

不能绑定多次，如果绑定多次，后面的会覆盖掉前面的

1.addEventListener()

 通过这个方法也可以为元素绑定响应函数

  参数：

1.事件的字符串，不加on

2.回调函数，当事件触发时该函数会被调用

3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

2. attachEvent()

- 在IE8中可以使用attachEvent()来绑定事件

- 参数：

1.事件的字符串，要on

2.回调函数

- 这个方法也可以同时为一个事件绑定多个处理函数

不同的是它是后绑定先执行，执行顺序和addEventListener()相反

- 参数：

1.事件的字符串，要on

2.回调函数

- 这个方法也可以同时为一个事件绑定多个处理函数

不同的是它是后绑定先执行，执行顺序和addEventListener()相反

addEventListener()中的this，是绑定事件的对象

attachEvent()中的this，是window

需要统一两个方法的this

参数：

obj 要绑定事件的对象

eventStr 事件的字符串(不要on)

callback 回调函数

• （二）JavaScript事件的传播

关于事件的传播网景公司和微软公司有不同的理解

  - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发 当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应 该在冒泡阶段执行。

- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

- W3C综合了两个公司的方案，将事件传播分成了三个阶段

  1.捕获阶段

  - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

2.目标阶段

- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段

- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

  一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

  - IE8及以下的浏览器中没有捕获阶段