事件绑定的三种方式
- 在标签中直接绑定
<button onclick="handleClick()" >自定义函数</button>
<button onclick="alert('原生函数')" >原生函数</button>
- 在js事件中获取dom事件绑定
<button id="btn" onclick="handleClick()" >dom事件绑定</button>
document.getElementById('btn').onclick=handleClick();
- 事件监听addEventListener和attachEvent
addEventListener()函数语法：
elementDOM.addEventListener(eventName,handle,useCapture);
| 参数 | 说明 |
|---|---|
| elementDOM | DOM元素 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false ，这里涉及到JavaScript事件流的概念。 |
attachEvent()函数语法：
elementDOM.attachEvent(eventName,handle);
| 参数 | 说明 |
|---|---|
| elementDOM | DOM元素 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
兼容性处理
| 兼容 | 不兼容 | |
|---|---|---|
| attachEvent | IE7、IE8 | firefox、chrome、IE9、IE10、IE11、safari、opera |
| addEventListener | firefox、chrome、IE、safari、opera | 兼容IE7、IE8 |
attachEvent和addEventListener异同点
相同点：都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。 不同点：
1.attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。
2.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。
前两种的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢？
区别：用 "addeventlistener"可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick"事件，只会执行第一个；在js通过匿名函数的方式绑定的只会执行最后一个事件。
