您的位置：Web开发->JavaScript事件监听

JavaScript事件监听2008-05-27 来自：lizhe1985  [收藏到我的网摘]

来源：learning for ever - 博客园

考虑这样的情形在IE浏览中处理，需要响应页面的按钮点击事件，有哪些方法呢？

（1）onclick属性添加事件处理函数

＜javascript＞
function DoClick()//handler of click event
{

}
＜/javascript＞

＜button id='test1' onclick=DoClick＞test1＜/button＞

（2）attachEvent方法添加事件处理函数

＜body＞
＜button name="test2"＞test2＜/button＞

＜/body＞
＜javascript＞
function attClick()//handler of click event
{
//process click event
}
test2.attachEvent("onclick",attClick);
＜/javascript＞

现在问题来，如果我们同时添加这两种事件处理方式，那么他们相应的顺序是什么样的，下面来模拟一下这种情形:

＜BODY＞
＜button id="test31"＞test31＜/button＞
＜script＞
function DoClick()//property event handler
{
alert('calling DoClick');
}
function AttClick1()//attach event handler
{
alert('calling AttClick1');
}
test31.onclick=DoClick;
test31.attachEvent('onclick',AttClick1);

＜/script＞
＜/BODY＞（code for 3.1) ＜BODY＞
＜button id="test32"＞test32＜/button＞
＜script＞
function DoClick()//property event handler
{
alert('calling DoClick');
}
function AttClick1()//attach event handler
{
alert('calling AttClick1');
}
function AttClick2()
{
alert('calling AttClick2');
}
test32.attachEvent('onclick',AttClick1);
test32.onclick=DoClick;
＜/script＞
＜/BODY＞(code for 3.2)

测试结果是：先调用属性处理函数，再调用attach事件处理函数。

attachEvent方式还用一个好处就是他能添加任意多个事件处理函数

＜button id="test41"＞test41＜/button＞
＜script＞
function DoClick()
{
alert('calling DoClick');
}
function AttClick1()
{
alert('calling AttClick1');
}
function AttClick2()
{
alert('calling AttClick2');
}

test41.attachEvent('onclick',AttClick1);
test41.attachEvent('onclick',AttClick2);

＜/script＞

attach多个事件处理函数，他们的调用顺序又是怎样的呢,测试一下就明白啦。

＜button id="test41" ＞test41＜/button＞
＜script＞
function DoClick()
{
alert('calling DoClick');
}
function AttClick1()
{
alert('calling AttClick1');
}
function AttClick2()
{
alert('calling AttClick2');
}
function AttClick3()
{
alert('calling AttClick3');
}
test41.attachEvent('onclick',AttClick1);
test41.attachEvent('onclick',AttClick2);
test41.attachEvent('onclick',AttClick3);
＜/script＞(code for 4.1) ＜button id="test42"＞test42＜/button＞
＜script＞
function DoClick()
{
alert('calling DoClick');
}
function AttClick1()
{
alert('calling AttClick1');
}
function AttClick2()
{
alert('calling AttClick2');
}
function AttClick3()
{
alert('calling AttClick3');
}
test42.attachEvent('onclick',AttClick3);
test42.attachEvent('onclick',AttClick2);
test42.attachEvent('onclick',AttClick1);

＜/script＞(code for 4.2)

通过测试结果可以看出调用的顺序和attach的顺序无关。

推荐人评论

考虑这样的情形在IE浏览中处理，需要响应页面的按钮点击事件，有哪些方法呢？

用户评论

正在载入评论列表...