转载的,但不明确出处

往往我们需要在 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动态添加事件的更多相关文章

  1. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  2. JS——动态添加事件和移除事件(有待补充...)

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...

  3. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  4. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  5. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

  6. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

随机推荐

  1. Microsoft.AlphaImageLoader滤镜解说

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是 ...

  2. Java IO之File

    FILE类是用来实现获取文件.文件夹的类库工具,File并不是像类名所表示的那样仅仅是用来表示文件.它还能够用来表示文件夹. 所以能够用File来获取一个文件夹下的全部文件,甚至是文件夹中的文件. 一 ...

  3. 【百度地图-安卓SDK】从头开始写android程序

    [百度地图-安卓SDK]从头开始写android程序首先确保有这四个文件    安装jdk先安装android开发SDK(并不只是为eclipse服务的),即运行installer_r15-windo ...

  4. 【JavaScript】常用的JS

    JQuery.UnderScoreJS.Zepto 原生JS等

  5. [Node.js] npm init && npm install

    npm init: For create package.json file which will recode the dependence. npm install: You can also w ...

  6. [原创]-IIS7.5优化,支持同时10万个请求

    背景:        IIS7.5是微软推出的最新平台IIS,性能也较以前有很大的提升,但是默认的设置配不适合很大的请求.但是我们可以根据实际的需要进行IIS调整,使其性能更佳,支持同时10万个请求. ...

  7. SQL server connection KeepAlive[转]

    1.什么是SQL server TCP连接的keep Alive? 简单说,keep alive 是SQL server在建立每一个TCP 连接的时候,指定了TCP 协议的keepaliveinter ...

  8. APP快速通过苹果AppStore审核九大诀窍

    [IT168技术]对于移动应用开发者来说, 最令人沮丧的可能莫过于辛辛苦苦开发的应用, 没能通过苹果AppStore的审核,或者在应用更新时遭遇下架.苹果的AppStore的审核流程和标准, 一向不透 ...

  9. 永远不要在Linux 执行的 10 个最危险的命令

    转: http://www.tecmint.com/10-most-dangerous-commands-you-should-never-execute-on-linux/ http://www.l ...

  10. 安装PIL库时提示python未注册错误(自定义python安装路径)

    import sys from _winreg import * # tweak as necessary version = sys.version[:3] installpath = sys.pr ...