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的地址栏射击游戏代码
Mar 10 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
vue实现树形菜单效果
Mar 19 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
关于uniApp editor微信滑动问题
Jan 15 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的MySQL连接类
2013/06/07 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python的help函数如何使用
2020/06/11 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
啤酒节策划方案
2014/05/28 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
入党介绍人意见2015
2015/06/01 职场文书
雷锋观后感
2015/06/10 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python