javascript事件监听

考虑这样的情形在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.οnclick=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)

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

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

转载于:https://www.cnblogs.com/AganCN/archive/2008/05/24/1206272.html