JS如何为⼀个元素怎么绑定多个事件？
alert怎么读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        load = function(){
8            ElementById('btn').onclick = function () {
9                alert(1);
10            };
11            ElementById('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        load = function(){
8            ElementById('btn').addEventListener('click', function(){
9                alert(1);
10            }, false);
11            ElementById('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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。