关于JS动态添加事件

两种方式：直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况：
var t = document.getElementById("tab1");
t.onclick = function tst(){
alert('');
}

第二种情况这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)，呵呵
   var tb = document.getElementById("tab1");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('11'), false);
        td_value.addEventListener('click', alert('12'), false);
    } else { // IE
        td_value.attachEvent('onclick', function(){alert('21');});
        td_value.attachEvent('onclick', function(){alert('2'2);});
    }

该文章转载自鸡立鹤群博客：http://www.muzili.com/article.asp?id=43

　　不过在用的时候很是郁闷，如为good添加onMoserOver的事件

document.getElementById('QuickUserLoginPart').onmouseover = alert("移过了！")；

　　把这个添加在input的onClick里，点击了马上会弹出一个“移过了！”的提示框，然后当你鼠标移过那个ＩＤ为ＧＯＯＤ的区域时是什么反应都没有的。一定要把"onmouseover ="后面的内容写上相关定义好的function才行。 [cry] 光明白这点就浪费了我两个小时时间啊～～～～～～学艺不精啊。

ＰＳ：不知道有没有去除页面元素添加事件的JS

再记录个：
JS:动态添加删除元素

<HEAD>
<SCRIPT>
function removeElement()
{
try
{
//The first child of the div is the bold element.
var oChild=Div1.children(0);
Div1.removeChild(oChild);
}
catch(x)
{
alert("You have already removed the bold element. Page will be refreshed when you click OK.")
document.location.reload();
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=Div1 onclick="removeElement()">
Click anywhere in this sentence to remove this <B>Bold1</B><B>Bold2</B> word.
</DIV>
</BODY>

[html]
<script>
function b(){
alert("我被click了!!5555~~~~~~~~~~");
}

function a(){
good.onclick=b;
}

</script>
<div id="good" style="height:100px; width:100px;background:#323923;color:white;">点我啊</div>

<input type=button value="添加点击事件" onclick="a();">

[/html]

[code]
<body>
<div id="good" style="height:100px; width:100px;background:#323923"></div>
<script>
document.getElementById("good").attachEvent("onclick", function() {alert("haha");});
</script>
</body>
[/code]

<html>
<body>
<script>
//建一个row行，col列的表格
var tbl, tbody, tr, td, text, i,j,row,col;
row=10;col=15;
var theDoc = document;
var theBody = theDoc.body;

tbl = theDoc.createElement("TABLE");
tbl.border = "1";
tbl.setAttribute("id","abc");
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, null);
theBody.insertBefore(tbl, null);
for (i=0; i<row; i++) {
tr = theDoc.createElement("TR");
for (j=0;j<col;j++)
{
td = theDoc.createElement("TD");
text = theDoc.createTextNode("Text");
tbody.insertBefore(tr, null);
tr.insertBefore(td, null);
td.insertBefore(text, null);
}
}
var a="aaa";
var b="bbb";
document.getElementById("abc").attachEvent("onclick",function(){alert(a);alert(b)});
</script>
</body>
</html>

往往我们需要在 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(show) : 'javascript:show()');
看起来很简单，也兼容浏览器，就是不知道还有没有其他方面的影响，或者有更好的方法可以取代呢？

posted on 2007-04-20 17:34 mbskys 阅读(1331) 评论(1) 收藏举报