JS 如何为一个元素怎么绑定多个事件?

onclick()这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera支持）。

一、onclick()方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绑定多个事件</title>
 6     <script>
 7         window.onload = function(){
 8             document.getElementById('btn').onclick = function () {
 9                 alert(1);
10             };
11             document.getElementById('btn').onclick = function () {
12                 alert(2);
13             };
14         }
15     </script>
16 </head>
17 <body>
18 <button id="btn">点我</button>
19 </body>
20 </html>

运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成

二、addEventListener()方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绑定多个事件</title>
 6     <script>
 7         window.onload = function(){
 8             document.getElementById('btn').addEventListener('click', function(){
 9                 alert(1);
10             }, false);
11             document.getElementById('btn').addEventListener('click', function(){
12                 alert(2);
13             }, false);
14         }
15     </script>
16 </head>
17 <body>
18 <button id="btn">点我</button>
19 </body>
20 </html>

addEventListenert方法第一个参数填写事件名，第二个参数是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理。第三个参数可以省略，大多数情况也不需要用到第三个参数，不写第三个参数默认false