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.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的事件处理函数调用顺序是怎么样的?

  如何查看一个事件的所有回调函数?

  在调用某个事件处理函数时,如何停止调用同一个对象后继的事件处理函数?


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3