DOM的addEventListener事件与IE的attachEvent事件的区别

时间：2021-12-01 04:35:08

首先看下addEventListener()事件代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>test54</title>
 6 </head>
 7 <body>
 8     <input type="button" id="myBtn" value="点 击" name="btnName" />
 9     <script type="text/javascript" src="test54.js"></script>
10 </body>
11 </html>
1 var btn = document.getElementById("myBtn");
2 var handler = function() {
3         console.log(this.id);
4         console.log(this === window);//false
5     };
6 btn.addEventListener("click", handler, false);
7 //btn.removeEventListener("click", handler, false);

 

然后看看attachEvent()事件代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" id="myBtn" value="点 击" name="btnName" />
 9     <script type="text/javascript" src="test55.js"></script>    
10 </body>
11 </html>
1 //only ie
2 var btn = document.getElementById("myBtn");
3 var handler = function() {
4         console.log("Clicked");
5         console.log(this === window); //true
6         console.log("Hello world!!!"); //IE9一下会出现输出倒序问题，123->321
7     };
8 btn.attachEvent("onclick", handler);
9 btn.detachEvent("onclick", handler);

 

可以看出addEventListener()事件处理程序会在其所属元素的作用域内运行，而attachEvent()事件处理程序会在全局作用域中运行（this等于window），并且在IE9以下版本里会出现输出倒序问题。

标签：

相关文章