(divはJSの前に配置する必要があることに注意する必要があります)
一般的に言えば、DOMオブジェクトが同じイベントにバインドされている場合、最後のイベントのみが有効になります。たとえば、次のようになります。
コードコピーは次のとおりです。
document.getElementById( "btn")。onclick = method1;
document.getElementById( "btn")。onclick = method2;
document.getElementById( "btn")。onclick = method3;
次に、Method3のみが有効になります。
Mozillaシリーズの場合は、AddEventListenerを使用して、次のような順番に複数のイベントを実装できるようにします。
コードコピーは次のとおりです。
var btn1obj = document.getElementById( "btn1");
//ELEMENT.ADDEVENTLISTENER(Type、リスナー、UseCapture);
btn1obj.addeventlistener( "click"、method1、false);
btn1obj.addeventlistener( "click"、method2、false);
btn1obj.addeventlistener( "click"、method3、false);
実行順序はmethod1-> method2-> method3です
IEシリーズの場合、AttachEventは次のような順番に複数のイベントを実装できます。
コードコピーは次のとおりです。
var btn1obj = document.getElementById( "btn1");
//object.attachevent(event,function);
btn1obj.attachevent( "onclick"、method1);
btn1obj.attachevent( "onclick"、method2);
btn1obj.attachevent( "onclick"、method3);
実行順序は方法3-> method2-> method1です
======================================================================================================
モジラで:
AddEventListenerの使用方法
Target.AddeventListener(タイプ、リスナー、UseCapture);
ターゲット:ドキュメントノード、ドキュメント、ウィンドウ、またはxmlhttprequest。
タイプ:文字列、イベント名には、「クリック」、「マウスオーバー」、「キーダウン」など、「オン」が含まれていません。
リスナー:JavaScriptのEventListenerインターフェイスまたは関数を実装します。
usecapture:キャプチャを使用するかどうか、通常はfalseを使用します。例:document.getElementById( "testText")。AddEventListener( "keydown"、function(event){alert(event.keycode);}、false);
IEで:
Target.Attachevent(タイプ、リスナー);
ターゲット:ドキュメントノード、ドキュメント、ウィンドウ、またはxmlhttprequest。
タイプ:文字列、イベント名、「onclick」、「onmouseover」、「onkeydown」などの「on」を含む。
リスナー:JavaScriptのEventListenerインターフェイスまたは関数を実装します。例:document.getElementById( "txt")。attachevent( "onclick"、function(event){alert(event.keycode);});
W3CおよびIEは、指定されたイベントの削除もサポートしています。目的は、セットイベントを削除することです。フォーマットは次のとおりです。
removeEventListener(イベント、関数、キャプチャ/バブル);
Windows IEの形式は次のとおりです。
Detachevent(イベント、機能);
Dom2 Evolution:
| DOM 0イベント | DOM 2イベント |
| onblur() | ぼやけ |
| onfocus() | 集中 |
| onchange() | 変化 |
| onmouseover() | マウスオーバー |
| onmouseout() | マウスアウト |
| onmousemove() | Mousemove |
| onMousedown() | ムーズダウン |
| onmouseup() | マウスアップ |
| onclick() | クリック |
| ondblclick() | dblclick |
| onkeydown() | キーダウン |
| onkeyup() | キーアップ |
| onkeypress() | キープレス |
| onsubmit() | 提出する |
| onload() | 負荷 |
| onunload() | アンロード |
新しいDOM2の使用は、addeventlistener()関数によって観察できます。
コードコピーは次のとおりです。
AddEventListener(イベント、関数、キャプチャ/バブル);
パラメーターイベントは上の表に示されています。機能は実行される関数です。キャプチャとバブルは、W3Cによって処方された2つのタイムモードです。簡単に言えば、Captureはドキュメントの最初から最後の行を読み取り、イベントを実行することです。バブルは最初に指定された場所を見つけてから、イベントを実行します。
キャプチャ/バブルのパラメーターは、ブール値、キャプチャを使用するための真の手段、およびバブルの偽手段です。 Windows Internet Explorerは、次のような形式を使用して、abactedEvent()であるイベントハンドラーも策定しました。
コードコピーは次のとおりです。
window.attachevent( "submit"、myfunction());
さらに特別なのは、Windows IE環境ではバブルモードが使用されているため、ActitionEventがキャプチャ/バブルパラメーターを指定する必要がないことです。
どのリスニングタイプがサポートされているかを判断する方法は?のように:
コードコピーは次のとおりです。
if(typeof window.addeventlistener!=“ undefined”){
window.addeventlistener( "load"、lollover、false);
} それ以外 {
window.attachevent( "onload"、lollover)
}
上記のtypeof windof.addeventlistener!= "未定義"プログラムコードは、ユーザーのブラウザがAddEventListenerイベントモデルをサポートするかどうかを判断できます。サポートされていない場合は、AttachEventが使用されます。
W3CおよびIEは、指定されたイベントの削除もサポートしています。目的は、セットイベントを削除することです。フォーマットは次のとおりです。
W3C形式:
removeEventListener(イベント、関数、キャプチャ/バブル);
Windows IEの形式は次のとおりです。
Detachevent(イベント、機能);