JavaScript DOM 添加事件

 更新时间:2009年02月14日 13:58:40   作者:  
这是我在给库中添加事件的时候写的添加事件的方法!这个方法实现了跨浏览器之间的方法!
因为对于支持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深入理解节流与防抖

    防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死,下面这篇文章主要给大家介绍了关于JavaScript防抖与节流的实现与注意事项,需要的朋友可以参考下
    2022-04-04
  • JavaScript判断页面加载完之后再执行预定函数的技巧

    JavaScript判断页面加载完之后再执行预定函数的技巧

    这篇文章主要介绍了JavaScript判断页面加载完之后再执行预定函数的技巧,原理还是利用监听器监听元素事件、被触发则执行函数,需要的朋友可以参考下
    2016-05-05
  • uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法

    uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法

    写微信小程序的时候,难免会为了赶进度而直接使用本地的图片,在模拟器上的时候可以正确显示图片,但是到手机上就无法显示图片了,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的方法,需要的朋友可以参考下
    2022-12-12
  • 详解适配器在JavaScript中的体现

    详解适配器在JavaScript中的体现

    在日常开发中,很多时候会不经意间写出符合某种设计模式的代码,而适配器其实在JavaScript中应该是比较常见的一种了。这篇文章主要介绍了适配器在JavaScript中的体现 ,需要的朋友可以参考下
    2018-09-09
  • 分享11个常用JavaScript小技巧

    分享11个常用JavaScript小技巧

    在我们的日常开发过程中,我们经常会遇到数字与字符串转换,检查对象中是否存在对应值,条件性操作对象数据,过滤数组中的错误值,等等这类处理。本文整理出了一些常用的小技巧,希望大家能喜欢
    2022-06-06
  • JavaScript中this指向的最全总结

    JavaScript中this指向的最全总结

    前端的初学者在学习Javascript中this指向的时候经常都会一头雾水,尤其是在ES6箭头函数出现之前,所以本篇文章主要是介绍和总结了各种情况下的this指向,希望对大家有所帮助
    2023-12-12
  • element-ui 上传图片后标注坐标点

    element-ui 上传图片后标注坐标点

    有个组件库的名称叫做element-ui,基于Vue2.0开发,提供了丰富的PC端组件,本文通过实例代码给大家介绍element-ui 上传图片后标注坐标点的示例代码,感兴趣的朋友跟随小编一起看看吧
    2021-07-07
  • 工厂模式在JS中的实践

    工厂模式在JS中的实践

    本文主要介绍了JS中的工厂模式实践。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 关联的Select,可以支持客户端动态更新

    关联的Select,可以支持客户端动态更新

    关联的Select,可以支持客户端动态更新...
    2006-09-09
  • js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)

    js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)

    这篇文章主要为大家详细介绍了QQ面板拖拽效果,探秘慕课网DOM事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论