转载的,但不明确出处

往往我们需要在 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. 丢失全部控制文件,noresetlogs重建控制文件,alter database open

    測试2: (1)一致性的全备 SQL> shutdown immediate; $ cp -rf $ORACLE_BASE/oradata/boss/*.dbf /oradata/bossbak ...

  2. 教你用Cocosdx导出安卓安装文件(.apk)(一)

    我也是刚弄出来,过程可能有点混乱和不具体,我尽我所能写完整.各位看官多多包涵 设备环境: 我所用的是mac 10.8.5    64位 Cocosdx-3.0rc2 xcode 5.0 一.准备 ND ...

  3. JSAPI用户手册

    本文档主要涵盖如何嵌入SpiderMonkey javascript引擎到你自己的c++程序中. JavaScript在浏览器端已经被广泛使用了.但是,Mozilla的javascript引擎可以被嵌 ...

  4. MySQL数据库InnoDB存储引擎中的锁机制

    MySQL数据库InnoDB存储引擎中的锁机制    http://www.uml.org.cn/sjjm/201205302.asp   00 – 基本概念 当并发事务同时访问一个资源的时候,有可能 ...

  5. 数据连接命令join

    join主要用来将两个相关联的文件连接起来.两个文件相关联的意思是指这两个文件中有一些字段是关联的,例如两个文件的第1个字段都是学号,且每个学生的学号是唯一的.像这种具有唯一性关联的文件,就可以使用j ...

  6. 项目源码--JAVA基于LBS地理位置信息应用的服务端

    技术要点: 1. LBS应用框架服务端实现 2. JAVA服务端技术 3. MYSQL数据库技术 4. 源码带详细的中文注释 ......   详细介绍: 1. LBS应用框架服务端实现 此套源码是基 ...

  7. Replace INTO与INSERT INTO的不同之处

    Replace INTO和INSERT INTO的区别: REPLACE的运行与INSERT很相似.只有一点例外,假如表中的一个旧记录与一个用于PRIMARY KEY或一个UNIQUE索引的新记录具有 ...

  8. java操作spark1.2.0

    虽然推荐的是scala,但是还是试一下 package org.admln.java7OperateSpark; import java.util.Arrays; import java.util.L ...

  9. 【Linux/Ubuntu学习5】Ubuntu 下android 开发,eclipse不能识别手机

    ubuntu下eclipse不能识别手机解决方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 1) 在终端运行 lsusb 会发现结果 ...

  10. LRU在MySQL缓存池的实现

    MySQL的InnoDB引擎设置有索引及数据缓存池,其中用到的LRU算法来维持缓存的命中率 这里用到了顺序表list来作为缓冲池,每个数据节点称为block 该算法采用“中点插入法”:当插入一个新bl ...