多种方法实现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 相关文章推荐
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
vue.js实现简单轮播图效果
Oct 10 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
营销与策划专业毕业生求职信
2013/11/01 职场文书
售房协议书
2014/08/19 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Python超详细分步解析随机漫步
2022/03/17 Python