javascript事件监听

原帖地址：http://www.cnblogs.com/AganCN/archive/2009/02/06/1206272.html

 

考虑这样的情形在IE浏览中处理，需要响应页面的按钮点击事件，有哪些方法呢？
（1）onclick属性添加事件处理函数

function DoClick()//handler of click event
{

}


test1

测试1test1
（2）attachEvent方法添加事件处理函数

test2



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

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

test31
<script>
function DoClick()//property event handler
{    
    alert('calling DoClick');    
  }
function AttClick1()//attach event handler
{
    alert('calling AttClick1');
  }
test31.οnclick=DoClick; 
test31.attachEvent('onclick',AttClick1); 

</script>

（code for 3.1)

test32
<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.οnclick=DoClick;  
</script>

(code for 3.2)

测试3test3.1test3.2
测试结果是：先调用属性处理函数，再调用attach事件处理函数。
attachEvent方式还用一个好处就是他能添加任意多个事件处理函数

test41
<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多个事件处理函数，他们的调用顺序又是怎样的呢,测试一下就明白啦。

test41
<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)

test42
<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)

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

待解决的问题：
attach的事件处理函数调用顺序是怎么样的？
如何查看一个事件的所有回调函数？
在调用某个事件处理函数时，如何停止调用同一个对象后继的事件处理函数？