跨浏览器的事件处理程序感悟

小鱼儿 2022-07-16 09:18 146阅读 0赞

代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>火狐</title>  
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>  
<style>  
.background\{  
   height: 373px;  
    width: 244px;  
   background: url(screen-overview.jpg) 0 0 no-repeat;  
   position: relative;  
    padding-bottom: 30px;  
    margin: 0px auto;  
\}  
\#foxtail \{  
background: url(foxtail.png) 0 0 no-repeat;  
width: 156px;  
height: 156px;  
\}  
@keyframes animate-tail \{    
   0% \{background-position: -6864px 0; \}  
   100% \{background-position: 0 0;\}  
\}  
@-webkit-keyframes animate-tail\{  
0% \{background-position: -6864px 0; \}  
   100% \{background-position: 0 0;\}  
\}  
\#foxtail \{  
 animation: animate-tail 3.75s steps(44) infinite;  
\}  
</style>  
</head>  
<body>  
<div class="background">  
<div id="foxtail"></div>  
</div>  
</body>  
<script>  
(function($)\{  
var eventUtil=\{  
addHandler:function(element,type,handler)\{  
if(element.addEventListener)\{  
element.addEventListener(type,handler,false);  
alert('dom2');  
\}else if(element.attachEvent)\{  
element.attachEvent('on'+type,handler)  
alert('IE');  
\}else\{  
element\['on'+type\]=handler;  
alert('dom0');  
\}  
\},  
removeHandler:function(element,type,handler)\{  
if(element.removeEventListener)\{  
element.removeEventListener(element,type,false);  
\}else if(element.detachEvent)\{  
element.detachEvent('on'+type,handler)  
\}else\{  
element\['on'+type\]=null;  
\}  
\}  
\};  
   
var  hadler=function()\{  
alert('this :'+this +'     id :'+this.id);  
\};  
var btn=document.getElementById('foxtail');  
eventUtil.addHandler(btn,'click',hadler);  
\})(jQuery);  
</script>  
</html>

javaScritp高级程序设计一书中说,在ie中使用事件处理程序(attachEvent)与Dom0级方法(Dom0中使用事件处理程序，如 btn.οnclick=function();)的主要区别在于事件处理程序的

作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域内运行，因此this等于window。

但是结果我自己的测试，在ie下，使用attachEvent()方法，我测试过，在ie7,ie8 的时候this 是window， ie9及以上事件处理程序任然会在其所属元素的作用域内运行，既ie9及以上this不是window，而是事件处理程序所述的元素。   不知道是我理解错误还是什么书中有错，请大家赐教。