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

原创 2007年09月28日 10:19:00

【注释】:这是别人在网上总结的,我收藏下!

 

 

js动态添加事件的方法
往往我们需要在 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()');
看起来很简单,也兼容浏览器,就是不知道还有没有其他方面的影响,或者有更好的方法可以取代呢?
 

JS生成动态表格并为每个单元格添加单击事件的方法

Demo function getColumnDetail(column) { column.style.color = "blue"; //将被点击的单元格设置为蓝色 ...

使用js动态添加点击事件时,click与onclick的区别

使用js动态添加点击事件时,click与onclick的区别!!!!!

JS动态添加移除事件 和 获取Event (兼容IE和Firefox)

今天小弄了一下JS事件,主要说一下FF和IE兼容的问题 对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEven...
  • ycb1689
  • ycb1689
  • 2015年05月06日 09:32
  • 17147

JS动态添加事件

方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript...
  • SDDCCCC
  • SDDCCCC
  • 2013年11月01日 01:02
  • 1874

在 JS 中动态添加事件(整理)

在 JS 中动态添加事件,涉及到浏览器兼容性问题。结合我的实践经验以及从网上收集的一些资料,特整理在此,希望有点用。   方法一、setAttribute var obj = document....

JS动态生成表单,并添加行双击事件

第一步:jsp上定义表格的div 记账日期 记账人 出库单号 往来单位 数量 售价金额 进价金额 第二步:JS使用Ajax获得后台数据,并写入到表格中 //获取某一出库类型某日期所有出库...

js动态append添加的节点点击事件无效

js动态append添加的节点点击事件无效问题

JS动态给元素添加事件处理代码

// The default code is a com class (inherited from linb.Com) Class('App', 'linb.Com',{ // Ensure...

js动态添加input按钮并给按钮增加onclick的函数事件(带参数)

function bt1(value, id) { if(!document...

jQuery向动态生成的内容添加事件响应(jquery live方法简介)

jQuery live() 方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。 这个方法可以看做是 .bin...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态添加事件的方法!()
举报原因:
原因补充:

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