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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
js面试题之异步问题的深入理解
Sep 20 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php抓取https的内容的代码
2010/04/06 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
通用C#笔试题附答案
2016/11/26 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
公务员个人自我评价分享
2013/11/06 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
维稳承诺书
2015/01/20 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android