js动态添加事件
转载的,但不明确出处
往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,
但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。
LEO:在IE6下尝试成功
方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}
也可写在一起
obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}
同样也可写在一起
obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。
综合应用
if (window.attachEvent)
{
//IE 的事件代码
}
else
{
//其它浏览器的事件代码
}
方法三、事件 = 函数
例:obj.onclick = Foo;
这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。
下面是我的解决办法:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
以上方法在ie8下会出现错误:
ie8也支持document.all, 但eval(function(){show()})却会出错
js用来区别IE与其他浏览器及IE6-8之间的方法。
1、document.all
2、!!window.ActiveXObject; 。!!的作用是把一个其他类型的变量转成的bool类型
使用方法如下:
if (document.all){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}
if (!!window.ActiveXObject){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}
下面是区别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″);
}
}
所以obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()'); 要改为:
一:
obj.setAttribute('onclick',document.all && !document.documentMode ? eval(function(){show()}) : 'javascript:show()');
二:
如果不想像上面那样改,也可以将ie8声明为ie7.
在head标签上加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
js动态添加事件的更多相关文章
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- JS——动态添加事件和移除事件(有待补充...)
动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- js实现动态添加事件
js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
随机推荐
- 有用好看的CSS+JS+table 导航
预览效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...
- 网站性能扩展案例:每天30-50亿请求,300K QPS是如何炼成的
Reduce Data广告服务网站(http://reducedata.com)如何扩展到每天300K QPS请求?分享经验如下: 1. 为大规模而设计,广告服务平台从一开始增长就很惊人,因此,系统开 ...
- 免费LInux主机资源
一.m-net.arbornet.org注冊 (1)telnet m-net.arbornet.org vista系统默认是关闭telnet的(由于不安全),须要开启.cmd->telnet(2 ...
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...
- Xcode快照——管理应用程序版本
转自:http://blog.csdn.net/yuanbohx/article/details/8919474 1.创建快照:FIle → Create Snapshot 2.查看快照:Window ...
- 什么是mysql中的元数据
一:什么是元数据? 所谓元数据,就是表示数据的数据,这些数据五花八门,总之,只要不是我们存储到数据库里的数据,大多都可以理解为元数据.描述数据库的任何数据—作为数据库内容的对立面—是元数据.因此,列名 ...
- Booting ARM Linux
来源:linux-2.6.30.4/Documentation/arm/Booting ARM Linux Booting ARM Linux ================= ...
- c#基础--常量(const),只读字段(readonly)
1.0:常量 常量被关键字const 所修饰 我们来看看常量的demo class Program { static void Main(string[] args) { const string n ...
- iOS 定位系统 知识
最近在做考勤定位系统 总结一些定位系统的知识. 后期会出一份算法主要攻克地球坐标和火星坐标转换的 1.关于百度的火星坐标定位策略 地图SDK/定位SDK的定位策略: WIFI + 基站 +GPS 三者 ...
- iOS ----Pods-resources.sh Permission denied
1:执行指令 chmod a+x "路径(Pods-resources.h文件所在的路径)" 2:cd 进如pods文件夹下面 3:执行指令 第一步: sudo chmod 777 ...