007 事件

一：事件

1.绑定事件的区别

　　addEventListener，attachEvent

　　相同点：都是元素的绑定事件

　　不同点：参数个数不同

　　　　　　浏览器的支持不同。

　　　　　　addEventListener谷歌与火狐支持，IE8不支持，IE11支持，attchEvent：谷歌与火狐不支持，IE11不支持，IE8支持

　　　　　　this不同，addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window

2.解绑

　　第一种方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="第一个" id="btn1">
 9     <input type="button" value="第二个" id="btn2">
10     <script>
11         document.getElementById("btn1").onclick=function(){
12             console.log("第一个");
13         };
14         //解绑
15         document.getElementById("btn2").onclick=function(){
16             document.getElementById("btn1").onclick=null;
17         }
18     </script>
19 </body>
20 </html>

　　第二种方式：

　　　　这里需要使用命名函数才能生效。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="第一个" id="btn1">
 9     <input type="button" value="第二个" id="btn2">
10     <script>
11         function f1(){
12             console.log("第一个");
13         }
14         function f2() {
15             console.log("第一个");
16         }
17         document.getElementById("btn1").addEventListener("click",f1,false);
18         document.getElementById("btn1").addEventListener("click",f2,false);
19         //解绑，将第一个事件解除
20         document.getElementById("btn2").onclick=function () {
21             document.getElementById("btn1").removeEventListener("click",f1,false);
22         }
23     </script>
24 </body>
25 </html>

猜你喜欢