js事件绑定

1、在DOM中直接绑定

2、在JS代码中直接绑定

3、使用事件监听函数绑定事件

一、在DOM中直接绑定

缺点：不利于行为和结构相分离，耦合度太高，不建议在项目中使用。在遇到相同类型的事件时，只会去处理第一个事件，而忽略后续的事件。传统方法只会在事件冒泡中运行，而非捕获和冒泡。
事件对象参数(e)仅非IE浏览器可用
优点：

非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致。处理事件时，this关键字引用的是当前元素

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象，对其绑定，elementObject.οnclick=function(){} 的格式

优点：

将行为与结构分离开了。非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致处理事件时，this关键字引用的是当前元素

缺点：

传统方法只会在事件冒泡中运行，而非捕获和冒泡。一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数。事件对象参数(e)仅非IE浏览器可用

三、通过事件监听函数绑定

使用 attachEvent(IE方式) 和 addEventListenter(W3C方式) 的好处就是，可以多次的进行事件的绑定，不向原始的方法那样，前面绑定的事件将会被后面的绑定的事件所覆盖，最后只能执行后面所绑定的函数。

W3C绑定的优点：

1.该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。2.在事件处理函数内部，this关键字引用当前元素。3.事件对象总是可以通过处理函数的第一个参数(e)捕获。4.可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

W3C绑定的缺点：

IE不支持，你必须使用IE的attachEvent函数替代。

IE方式的优点：

可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。

IE方式的缺点：

1.IE仅支持事件捕获的冒泡阶段2.事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）3.事件对象仅存在与window.event参数中4.事件必须以ontype的形式命名5.仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener