JavaScript 注册事件代码


Posted in Javascript onJanuary 27, 2011

首先是最常规的方法:
程序代码

<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的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
Javascript 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
js Math 对象的方法
Sep 01 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
React key值的作用和使用详解
Aug 23 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 #Javascript
EXT窗口Window及对话框MessageBox
Jan 27 #Javascript
基于jquery的表头固定的若干方法
Jan 27 #Javascript
jquery animate图片模向滑动示例代码
Jan 26 #Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 #Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 #Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript 中的事件教程
2007/04/05 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
js实现微信分享代码
2020/10/11 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python中join和split用法实例
2015/04/14 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
法人委托书的范本格式
2014/09/11 职场文书
个人原因辞职信模板
2015/05/13 职场文书
老乡会致辞
2015/07/28 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
python实现商品进销存管理系统
2022/05/30 Python