多种方法实现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
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
跟混乱的页面弹窗说再见
Apr 11 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
菜鸟修复电子管记
2021/03/02 无线电
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
《红军不怕远征难》教学反思
2014/04/14 职场文书
大学计划书范文800字
2014/08/14 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
师范生教育见习总结
2015/06/23 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏