一:事件
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>
3.