javascript---浅析注册事件

最新推荐文章于 2024-09-16 20:08:29 发布

jaudy

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量475

点赞数

文章标签： pig firefox function javascript 工作 html

原文网址为：http://item.feedsky.com/~feedsky/cssrain/~6110346/103912558/4218245/1/item.html 内容如下：

1. 首先是最常规的方法：

 
 <p id="para" title="cssrain demo!" οnclick="test()" >test</p>   
<script>   
function test()
{   
  alert("test");   
}   
</script>
 

2 .

当某一天，我们知道JavaScript要跟HTML结构实现分离后，就会改了一种写法:

 
  <p id="para" title="cssrain demo!">test</p>
<script>
function test()
{
    alert("test");
}
window.onload = function()
{
    document.getElementById("para").onclick = test;
}
</script>
 
 

3. 当我们工作越来越久后，有时候我们需要对某个元素绑定多个相同的事件类型：

 
 <p id="para" title="cssrain demo!">test</p>   
<script>   
function test()
{   
   alert("test");   
}   
   
function pig()
{
    alert("pig");
}
window.onload = function()
{
    document.getElementById("para").attachEvent("onclick", test);
    document.getElementById("para").attachEvent("onclick",pig);
}
</script>
 

4. 在一段时间内，你并没发现这段代码有任何错误。某一天，一个名叫firefox的浏览器闯入你的视野，当我们把这段代码放到firefox中执行后，发现并不能正常运行。问题就这样，越来越多，然而作为一名JS程序员，这些都是必须面对的。
为了解决这段代码的平台兼容性问题，我翻翻手册，知道了firefox跟ie的区别：
firefox中注册事件使用：addEventListener方法，同时为了兼容ie，我们必须用到if ... else...

 
 <p id="para" title="cssrain demo!">test</p>   
<script>   
function test(){   
  alert("test");   
}   
   
function pig(){   
  alert("pig");   
}   
   
window.onload = function()
{
   var element = document.getElementById("para");
   if(element.addEventListener)
   {
      //firefox  
      element.addEventListener("click",test,false);
      element.addEventListener("click",pig,false);
   }
   else
   {
       //IE 
       element.attachEvent("onclick",test);
       element.attachEvent("onclick",pig);
   }
}
</script>
 

5. 此时，代码就可以在多个平台上工作了。但随着水平的进步，你不满足每次都去判断，你想把这个判断封装起来，以后可以直接调用：

 
   <p id="para" title="cssrain demo!">test</p>   
<script>   
function test(){   
  alert("test");   
}   
   
function pig()
{   
  alert("pig");   
} 
function addListener(element,e,fn)
{
    if(element.addEventListener)
    {
         element.addEventListener(e,fn,false);
    }
    else
    {
         element.attachEvent("on" + e,fn);
    }
}
window.onload = function()
{
     var element = document.getElementById("para");
     element.addListener(element,"click",test);
     element.addListener(element,"click",pig);
}
</script>
 
  