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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JavaScript 继承使用分析
May 12 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
发布Angular应用至生产环境的方法
Dec 10 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
vue3中的组件间通信
Mar 31 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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实现的发送带附件邮件类实例
2014/09/22 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
什么是封装
2013/03/26 面试题
精彩的大学生自我评价
2013/11/17 职场文书
法人代表证明书
2014/09/18 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
音乐教师个人总结
2015/02/06 职场文书
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS