バインディングイベントに対応する3つの方法

2133 ワード

一、直接バインディング(UIとコード分離に不利で、イベント詳細は後を参照)
    
二、DOM事件のハンドル
document.getElementById("divid").onclick = function(){}; 
三、リスニング関数
var tb = document.getelementbyid("tab1"); 
if(window.event==null){//   ie ,event window     ,           .         event  
td.attachEvent('onclick', function(){alert('21');}); 
td.attachEvent('onclick', function(){alert('21');})
}
else { // mozilla, netscape, firefox,w3c
td.addEventListener('click', alert('11'), false); 
td.addEventListener('click', alert('12'), false); 
}  
以下は比較的安全な点の書き方です.
var tb = document.getelementbyid("tab1"); 
if(window.attachEvent){//           
td.attachEvent('onclick', function(){alert('21');}); 
td.attachEvent('onclick', function(){alert('21');})
}
else { // mozilla, netscape, firefox,w3c
td.addEventListener('click', alert('11'), false); 
td.addEventListener('click', alert('12'), false); 
}  
追加:
1、イベントの対象は現在発生しているイベント状態を記録していますので、イベントが発生した時に自動的に作成されます.最初はイベントがありません.undefinedです.ieの下では特に、windowの対象属性として直接作成されました.初期値はnullです.
  document.writeln(event);          //ie  null, ie  undefined
2、addEventListener()の三つ目のパラメータuseCaptureを説明し、イベントの流れの順序を表します.


window.οnlοad=function(){ document.getElementById("test1").addEventListener("click",test1,false); document.getElementById("test2").addEventListener("click",test2,false); } function test1(){ alert(" div ") } function test2(){ alert(" input ") }
三つ目のパラメータuseCaptureをtrue表現にしてキャプチャ順序を設定すると、falseとして、発泡順序で実行されることを表します.
useCapture=trueを設定し、buttonをクリックするとtest 1()が発生し、test 2()が発生するので、falseを使用することを推奨します.
3、イベントを削除するのはいい習慣です.メモリの漏れを避けるために.
removeEventListener("click",test2,true); 

document.detachEvent("onclick",test2);