javascript事件监听
2010-09-14 13:17:10 来源：WEB开发网考虑这样的情形在IE浏览中处理，需要响应页面的按钮点击事件，有哪些方法呢？
（1）onclick属性添加事件处理函数
<javascript>
function DoClick()//handler of click event
{
}
</javascript>
<button id='test1' onclick=DoClick>test1</button>
测试1test1
（2）attachEvent方法添加事件处理函数
<body>
<button name="test2">test2</button>
</body>
<javascript>
function attClick()//handler of click event
{
//process click event
}
test2.attachEvent("onclick",attClick);
</javascript>
测试2test2
现在问题来，如果我们同时添加这两种事件处理方式，那么他们相应的顺序是什么样的，下面来模拟一下这种情形:
<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)
测试3test3.1test3.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的事件处理函数调用顺序是怎么样的？
如何查看一个事件的所有回调函数？
在调用某个事件处理函数时，如何停止调用同一个对象后继的事件处理函数？
Tags：javascript 事件 监听
编辑录入：爽爽 [复制链接] [打 印]
中查找“javascript事件监听”更多相关内容
中查找“javascript事件监听”更多相关内容
赞助商链接
