Javascript——浅析注册事件
作者:cssrain 来源:cssrain 发布时间:2008-08-19 12:44:00
首先是最常规的方法:
<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</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
var element = document.getElementById("para");
if(element.addEventListener){ // firefox , w3c
element.addEventListener("click",test,false);
element.addEventListener("click",pig,false);
} else { // ie
element.attachEvent("onclick",test);
element.attachEvent("onclick",pig);
}
}
</script>
此时,代码就可以在多个平台上工作了。
但随着水平的进步,你不满足每次都去判断,你想把这个判断封装起来,以后可以直接调用:
<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");
addListener(element,"click",test);
addListener(element,"click",pig);
}
</script>
至此,作为一个程序员的工作就完了。
中间我们从一个最传统,最基本的写法 , 然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
好了,文章写到这里。希望大家有收获哦。。。
猜你喜欢
- Web Accessibility Initiative Accessible Rich Internet Applications认识AR
- 首先,把这个“功能”包含到页首:<!--#include virtual="/readini/inifile.in
- 相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能,每过一段时间,Gmail都会自动保存邮件草稿,这样在一些突 * 况下就能快速地
- IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固
- 这里会讨论令Oracle停机时间最小化的步骤。各种形式的停机--计划的或者是非计划的--总是不断地发生,一个DBA应该有正确的备份策略,这样
- 作者的blog :http://www.planabc.net/老甘的《完全用CSS实现的中英文双语导航菜单》一文中使用“position:
- 但是有时候,可以视看处进逻辑程度,可以把三者写成一个触发器,只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入,删除还是
- 文件:.wmv;大小:19,535KB;长度:00:26:39。 下载地址:SqlFunction_udf_Week.rar以下内容于201
- 在 EeePC 上装了个 Mac OS X,相应的开发工具也选择了 Coda。在
- 导读:这篇论坛文章主要介绍了使用SQL Server升级顾问的具体步骤,详细内容请参考下文。微软提供了SQL Server 2008升级顾问
- nofollow标签是Google2005年推出的,目的是尽量减少垃圾链接对搜索引擎的影响。有用过网页制作工具的人都知道,在这些工具里是找不
- 一个什么都不懂的家伙非跟我要个sql查询器 随便写了一个,当然为了数据安全,要过滤掉一个sql关键词和系统中的一些表了 哦,对了,里面的一些
- 浏览器:IE ,不支持firefoxfilter视觉滤镜的种类:Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) Dro
- 1.了解oracle外部表 外部表定义:结构被存放在数据字典,而表数据被放在OS文件中的表 作用:在数据库中查询OS文件的数据,还可以将OS
- 应用目标:制作文字特效 应用软件:Dreamweaver MX操作难度:★★☆☆☆我们常用的网页制作工具Dreamweaver MX不仅可以
- 如何制作一个搜索引擎链接程序?多收集几个网站的,然后我们引用它到自己的页面中。接下来,我们要创建页面用于搜索:<center>&
- 清空服务器缓存asp代码: <%Call RemoveAllCache()Sub RemoveAllCa
- 先看看:css中class与id的区别及应用表单的name与id其实是同一个意思,都是为了标记对象名称。它们所不同的是:name是Netsc
- 非原创:英文版混乱的标记语言XHTML2/HTML5源文地址:漫画英文版源文地址感谢我的同事Kevin Jaw的翻译。他的博客地址是:Kev
- 清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面