多种方法实现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获取当前select 元素值的代码
Apr 19 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue实现节点增删改功能
Sep 26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
js 提交和设置表单的值
2008/12/19 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
高三毕业寄语
2014/04/10 职场文书
绿色出行口号
2014/06/18 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Go语言测试库testify使用学习
2022/07/23 Golang