JavaScript DOM 添加事件


Posted in Javascript onFebruary 14, 2009

因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件!
而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式!这样我们就可以直接调用addEvent()方法来给对象添加事件了!
这不是更方便?!呵呵……
让我们来看看吧!
/**
* 注册一个监听事件到元素
* @param {Object} node 所要添加事件的对象
* @param {Object} type 事件类型
* @param {Object} listener 事件方法
*/
function addEvent( node, type, listener ) {
//使用前面的方法检查兼容性以保证平稳退化
if(!(node = $(node))) return false;

if(node.attachEvent) { // 这是针对IE 的方法
node['e'+type+listener] = listener;
node[type+listener] = function(){node['e'+type+listener]( window.event );}
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}else if (node.addEventListener) {
// 这是针对支持DOM的浏览器的方法
node.addEventListener( type, listener, false );
return true;
}
// 若两种方法都不具备则返回false;
return false;
};
window['liujingning']['addEvent'] = addEvent;

使用方法:
比如我们要给页面的onload()上添加事件,我们就可以这样写:
liujingning.addEvent(window,'load',function(Event) { //这里写你要写的代码}
我们也可以给某个ID添加事件
var getId = document.getElementById('aa');
liujingning.addEvent(getId,'load',function(Event) { //这里写你要写的代码}

Javascript 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 #Javascript
JavaScript实现动态增加文件域表单
Feb 12 #Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 #Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 #Javascript
js 判断 enter 事件
Feb 12 #Javascript
JavaScript 克隆数组最简单的方法
Feb 12 #Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python实现马丁策略的实例详解
2021/01/15 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
教师个人教学总结
2015/02/11 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
python缺失值的解决方法总结
2021/06/09 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫