IE事件模型与DOM事件模型

最新推荐文章于 2020-12-13 23:50:48 发布

今晚打酱油8

最新推荐文章于 2020-12-13 23:50:48 发布

阅读量649

点赞数

分类专栏： Ajax JavaScript 前台页面制作

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

[html]view plaincopy 
   
 <span style="font-size:18px;">当我们进行javascript编程的时，（至少）需要考虑两种模型：一种IE模型，事实规范，浏览器IE；另一种DOM2模型，是行业规范，浏览器如：火狐，谷歌.</span>  

IE模型，此种访问事件的方式是通过隐式可用的全局对象event。而DOM2规范的事件对象由系统创建，作为函数参数隐式传入事件处理器。

[javascript]view plaincopy 
   
 <body>  
 <!-- 绑定事件处理器时，将event作为参数传入 -->  
 <button οnclick="clickHandler(event);">按钮</button>  
 <script type="text/javascript">  
     function clickHandler(evt)  
     {  
         alert(evt.srcElement.innerHTML);//evt.srcElement返回发生事件的HTML元素  
     }  
 </script>  
 </body>  

输出结果：点击“按钮”后，输出此button的value值

DOM2

[javascript]view plaincopy 
   
 <body>  
 <!-- 绑定事件处理器时，将event作为参数传入 -->  
 <button id="a">按钮</button>  
 <script type="text/javascript">  
 //定义一个形参evt  
 function clickHandler(evt)  
 {  
 //DOM 2的事件对象将作为第一个参数传入clickHandler对象  
 alert(evt.target.innerHTML);//eve.target返回触发事件的事件源  
 }  
 //为按钮a绑定事件处理器  
 document.getElementById("a").οnclick=clickHandler;//DOM2规范的事件对象由系统创建，作为函数参数隐式传入事件处理器  
 </script>  
 </body>  

下面介绍兼容浏览器的方法

[javascript]view plaincopy 
   
 <body>  
 <button id="a">按钮</button>  
 <script type="text/javascript">  
 //定义一个形参evt  
 function clickHandler(evt)  
 {  
     //对于IE浏览器，事件作为隐式可用的全局对象event  
     if (!evt)   
     {  
         evt = window.event  
     }  
     //对于DOM 2事件模型，访问事件源用target属性  
     if (evt.target)  
     {  
         alert(evt.target.innerHTML);  
     }  
     //对于IE浏览器  
     else  
     {  
         alert(evt.srcElement.innerHTML);  
     }  
 }  