多种方法实现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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue组件学习教程
Sep 09 Javascript
angular.js实现购物车功能
Oct 23 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Vue实现剪贴板复制功能
Dec 31 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
javascript prototype 原型链
2009/03/12 Javascript
js几个验证函数代码
2010/03/25 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python变量命名的7条建议
2019/07/04 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
python下载的库包存放路径
2020/07/27 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
网管求职信
2014/03/03 职场文书
个人委托书范本汇总
2014/10/01 职场文书
财务会计实训报告
2014/11/05 职场文书
教师岗位职责
2015/02/03 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL