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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
js控制随机数生成概率代码实例
Mar 21 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
jQuery操作事件完整实例分析
2020/01/10 jQuery
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
js实现查询商品案例
2020/07/22 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
毕业生医学检验求职信
2013/10/16 职场文书
数控技术应届生求职信
2013/11/13 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
婚纱店策划方案
2014/05/22 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
企业委托书范本
2014/09/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
初中语文教师研修日志
2015/11/13 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
JAVA springCloud项目搭建流程
2022/05/11 Java/Android