JS和HTML分离:注册事件的方法进行封装

原文：http://www.cssrain.cn/article.asp?id=985

首先是最常规的方法：

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

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

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

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

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

如果按照上面的写法，我们只能输出第二个函数。
这时候我们需要用到attachEvent方法：

<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>

在一段时间内，你并没发现这段代码有任何错误。

某一天，一个名叫firefox的浏览器 闯入你的视野，当我们把这段代码放到firefox中执行后，

发现并不能正常运行。 问题就这样，越来越多，然而作为一名JS程序员，这些都是必须面对的。

为了解决这段代码的平台兼容性问题，我翻翻手册，知道了firefox跟ie的区别：

firefox中注册事件使用：addEventListener方法，同时为了兼容ie，我们必须用到if ... else...

<p id="para" title="cssrain demo!">test<

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!