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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
ES6 Generator函数的应用实例分析
Jun 26 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
Zerg剧情介绍
2020/03/14 星际争霸
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js定时器实例分享
2016/12/20 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python3 kubernetes api的使用示例
2021/01/12 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
保安部任务及岗位职责
2014/02/25 职场文书
食品业务员岗位职责
2014/03/18 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏