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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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 define函数的使用说明
2008/08/27 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
子页向父页传值示例
2013/11/27 Javascript
JS中操作JSON总结
2020/12/06 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
对python中Json与object转化的方法详解
2018/12/31 Python
django Admin文档生成器使用详解
2019/07/22 Python
django使用xadmin的全局配置详解
2019/11/15 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
广州某公司软件工程师面试题
2014/12/22 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
个园导游词
2015/02/04 职场文书
关于五一放假的通知
2015/08/18 职场文书
个人售房合同协议书
2016/03/21 职场文书
小学记事作文之200字
2019/08/06 职场文书