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 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Vue表单实例代码
Sep 05 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
详解tween.js 中文使用指南
Jan 05 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jquery获取节点名称
2015/04/26 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python处理大数字的方法
2015/05/27 Python
python入门教程之识别验证码
2017/03/04 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python列表如何更新值
2020/05/27 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
四风存在的原因分析
2014/02/11 职场文书
领导失职检讨书
2014/02/24 职场文书
四年级评语大全
2014/04/21 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
感谢信范文大全
2015/01/23 职场文书
个人委托书范文
2015/01/28 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis