多种方法实现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 tab效果的实现代码
Dec 26 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
Vue.js表单控件实践
Oct 27 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Django视图和URL配置详解
2018/01/31 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
简单了解python数组的基本操作
2019/11/26 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
初中生学习的自我评价
2013/11/14 职场文书
财务主管的岗位职责
2013/12/30 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android