js动态添加事件的方法

转载 2007年10月01日 08:51:00

往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,
但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。
方法二、用 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()');
看起来很简单,也兼容浏览器,就是不知道还有没有其他方面的影响,或者有更好的方法可以取代呢? 
 

Javascript 动态添加事件(附:javascript事件解说)

1、直接给对象添加事件 document.all.Object.ondblclick=function(){/*function*/}; 2、通过监听方式添加事件,多事件可并存,按添加顺序执行...
  • ruixue0117
  • ruixue0117
  • 2011年12月27日 12:14
  • 4950

js 动态添加onload事件

在js里,一般我们认为window对象有onload事件,调用方法:window.onload(); document.body对象有onload事件,调用方法: 或者          docum...
  • qij2256
  • qij2256
  • 2007年10月01日 08:56
  • 4607

通过js写html代码,添加事件传参数问题的解决方案

现在如果有这么一段html代码:我不希望直接写进html页面,用js的方法来写:var input = document.createElement("input");input.setAttribu...
  • javalover_yao
  • javalover_yao
  • 2010年12月07日 14:14
  • 3603

js动态添加事件的方法!()

【注释】:这是别人在网上总结的,我收藏下!   js动态添加事件的方法 往往我们需要在 JS 中动态...
  • DiligencyMan
  • DiligencyMan
  • 2007年09月28日 10:19
  • 457

js动态添加事件的方法

往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。方法一、setAttributevar ob...
  • W3031213101
  • W3031213101
  • 2007年09月01日 10:22
  • 642

jquery动态添加元素后, 该元素事件失效,可尝试原生 js写法解决

//活动中心 $('.active').click(function (){ getActivePic_S(); getActivePic_B(); ...
  • A9925
  • A9925
  • 2016年06月22日 15:35
  • 1353

js添加onload事件的通用方法(共享onload事件)

让函数在网页加载完毕后立刻执行,网页加载完毕时会触发一个onload事件,这个事件与window对象相关联。 在这里,我推荐使用第三种方法,因为代码可以直接拷贝使用,把需要执行的函数加入到队列里就可...
  • HLK_1135
  • HLK_1135
  • 2016年10月31日 21:56
  • 677

js为动态创建的元素添加事件

html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点 具体实现可以在demo中看到 ...
  • zhm0303
  • zhm0303
  • 2017年03月18日 12:11
  • 1479

JS动态添加方法并绑定参数

之前这么写的 for(var i=0;i   document.getElementsByName("primaryKey")[i].checked=false;   document.getE...
  • guoyankun
  • guoyankun
  • 2013年05月31日 13:17
  • 2825

JS动态添加事件

方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript...
  • SDDCCCC
  • SDDCCCC
  • 2013年11月01日 01:02
  • 1909
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态添加事件的方法
举报原因:
原因补充:

(最多只允许输入30个字)