多种方法实现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 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
JSONP 的原理、理解 与 实例分析
May 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嵌套输出缓冲代码实例
2015/05/12 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
德育标兵事迹材料
2014/08/24 职场文书
三行辞职书范文
2015/02/26 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python