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 相关文章推荐
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JS检测图片大小的实例
Aug 21 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
详解JavaScript的变量
Apr 04 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
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/12/05 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
python生成器表达式和列表解析
2016/03/10 Python
scrapy爬虫完整实例
2018/01/25 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
南京迈特望C/C++面试题
2012/07/09 面试题
十月份红领巾广播稿
2014/01/22 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
仓库文员岗位职责
2014/04/06 职场文书
个人担保书格式范文
2014/05/12 职场文书