多种方法实现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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
js动态为代码着色显示行号
May 29 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
基于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设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
yii用户注册表单验证实例
2015/12/26 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue生命周期实例小结
2018/08/15 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python Socket编程详细介绍
2017/03/23 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python字典的常用方法总结
2019/07/31 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
自荐书4要点
2014/01/25 职场文书
《金子》教学反思
2014/04/13 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
初中教师个人工作总结
2015/02/10 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
工作态度怎么写
2015/06/25 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2015初中团委工作总结
2015/07/28 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python