多种方法实现JS动态添加事件


Posted in Javascript onNovember 01, 2013

方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
但是IE不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。

方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent,object.attachEvent(event,function),例如:

obj.attachEvent("onclick", Foo); 
function Foo() 
{ 
alert("测试"); 
}

或者写成 obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener,element.addEventListener(type,listener,useCapture,
obj.addEventListener("click", Foo, false); 
function Foo() 
{ 
alert("测试"); 
}

同样也可写在一起obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
考虑兼容性: 
if (window.attachEvent)//兼容IE 
{ 
//IE 的事件代码 
} 
else 
{ 
//其它浏览器的事件代码 
}

上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数:

版本一:

function addEvent(elm, evType, fn, useCapture) { 
if (elm.addEventListener) { 
elm.addEventListener(evType, fn, useCapture);//DOM2.0 
return true; 
} 
else if (elm.attachEvent) { 
var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+ 
return r; 
} 
else { 
elm['on' + evType] = fn;//DOM 0 
} 
}

HTML5工作组的版本:
var addEvent=(function(){ 
if(document.addEventListener){ 
return function(el,type,fn){ 
if(el.length){ 
for(var i=0;i<el.length;i++){ 
addEvent(el[i],type,fn); 
} 
}else{ 
el.addEventListener(type,fn,false); 
} 
}; 
}else{ 
return function(el,type,fn){ 
if(el.length){ 
for(var i=0;i<el.length;i++){ 
addEvent(el[i],type,fn); 
} 
}else{ 
el.attachEvent(‘on‘+type,function(){ 
return fn.call(el,window.event); 
}); 
} 
}; 
} 
})();

方法三、事件 = 函数
例:obj.onclick = Foo;
这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
obj.onclick=method1; 
obj.onclick=method2; 
obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,此时应该用方法二的方法进行事件的绑定

区别IE6、IE7、IE8之间的方法:

var isIE=!!window.ActiveXObject; 
var isIE6=isIE&&!window.XMLHttpRequest; 
var isIE8=isIE&&!!document.documentMode; 
var isIE7=isIE&&!isIE6&&!isIE8; 
if (isIE){ 
if (isIE6){ 


alert(”ie6″); 

}else if (isIE8){ 


alert(”ie8″); 

}else if (isIE7){ 


alert(”ie7″); 

} 
}
Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 #Javascript
jQuery Mobile 导航栏代码
Nov 01 #Javascript
js将json格式内容转换成对象的方法
Nov 01 #Javascript
JS实现切换标签页效果实例代码
Nov 01 #Javascript
Javascript delete 引用类型对象
Nov 01 #Javascript
理解Javascript闭包
Nov 01 #Javascript
Javascript 命名空间模式
Nov 01 #Javascript
You might like
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
python迭代器实例简析
2014/09/25 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python 实现超级玛丽游戏
2020/11/25 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
国培计划培训感言
2014/03/11 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android