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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
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查看当前变量类型的方法
2015/07/31 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Python字符串格式化
2015/06/15 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
迟到检讨书大全
2014/01/25 职场文书
毕业留言寄语大全
2014/04/10 职场文书
我的画教学反思
2014/04/28 职场文书
信访工作经验交流材料
2014/05/23 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书