javascript 动态添加事件代码

 更新时间:2008年11月30日 16:51:56   作者:   我要评论
往往我们需要在 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()');
看起来很简单,也兼容浏览器,就是不知道还有没有其他方面的影响,或者有更好的方法可以取代呢?

相关文章

  • 小程序实现左滑删除功能

    小程序实现左滑删除功能

    这篇文章主要为大家详细介绍了小程序实现左滑删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • js tr控制下面的tbody隐藏和显示

    js tr控制下面的tbody隐藏和显示

    这个问题弄了我几天没心思写程序,问了论坛很多网友才搞定的。
    2008-07-07
  • javascript下对于事件、事件流、事件触发的顺序随便说说

    javascript下对于事件、事件流、事件触发的顺序随便说说

    向同一个标签 动态的添加事件是 执行的顺序在ie和其他非ie内核的浏览器有所不同 ie是“先进先出 ” 就是最先添加的最先执行,其他非ie内核的浏览器是 “先进后出”,就是 最后添加的事件 先执行。
    2010-07-07
  • JS图片预加载 JS实现图片预加载应用

    JS图片预加载 JS实现图片预加载应用

    由于图片加载慢,导致用户体验特别差,本文将介绍一种图片预加载技术,需要了解的朋友可以参考下
    2012-12-12
  • js去空格技巧分别去字符串前后、左右空格

    js去空格技巧分别去字符串前后、左右空格

    js去空格想必大家多少都会点吧,在接下来的文章中为大家详细介绍下如何分别去字符串前后,左边,右边空格,感兴趣的朋友可以参考下
    2013-10-10
  • 深入了解JavaScript的逻辑运算符(与、或)

    深入了解JavaScript的逻辑运算符(与、或)

    本篇文章分享的是 JS 当中的逻辑运算符与、或,也就是 && 、 || ,没错,别看这简简单单的几个运算符,虽然这是最基础的知识,但其中隐藏的奥秘却十分耐人寻味,接下来本文就为大家一一揭开这简单的运算符背后的奇妙之处。
    2016-12-12
  • JavaScript中的编码和解码函数

    JavaScript中的编码和解码函数

    本文主要介绍了JavaScript中的编码和解码函数。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js 创建一个浮动div的代码

    js 创建一个浮动div的代码

    js 创建一个浮动div的代码,一般用来指导用户下面的操作与多条件选择。点击一下就可显示,具体的大家可以自由发挥。
    2009-12-12
  • JS比较两个数值的大小实例

    JS比较两个数值的大小实例

    下面小编就为大家带来一篇JS比较两个数值的大小实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • React props和state属性的具体使用方法

    React props和state属性的具体使用方法

    本篇文章主要介绍了React props和state属性的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论