addEventListenerの使い方例を紹介します.
3954 ワード
(divはjsの前に置かないといけないので注意してください.)
一般的に、domオブジェクトに同じイベントをバインドすると、最後の一つだけ有効になります.
Mozillaシリーズであれば、addEventListenerを使用して、複数のイベントを順番に実行することができます.
ieシリーズであれば、atachEventを使って、複数のイベントを順番に実現できます.
==========================================================================================================
Mozia中:
addEvent Listenerの使い方
target.addEvent Listener(type,listener,useCapture);
target:文書ノード、document、windowまたはXMLtpRequest.
type:文字列、イベント名には、「click」、「mouseover」、「keydown」などが含まれていません.
listener:EventListenerインターフェースまたはJavaScriptの関数を実現しました.
useCapture:キャプチャーを使用するかどうかは、一般的にfalseを使用します.例えば、document.getElement ById(「testText」).addEvent Listener(「keydown」,function(event){alert(event.keyCode)},false);
IE中:
target.atachEvent(type,listener)
target:文書ノード、document、windowまたはXMLtpRequest.
type:文字列、イベント名には「on」、例えば「onclick」、「onmouseover」、「onkeydown」などがあります.
listener:EventListenerインターフェースまたはJavaScriptの関数を実現しました.例えば、document.getElemenntById(「txt」).atachEvent(「onclick」、function(event){alert(event.keyCode)};
W 3 C及びIEは、指定されたイベントの削除を同時にサポートしています.用途は、削除設定されたイベントで、フォーマットはそれぞれ以下の通りです.
removeevent Listener(event,function,capture/bubble);
Windows IEのフォーマットは以下の通りです.
detachEvent(イベント、function);
DOM 2の進化:
DOM 0 Event
DOM 2 Event
onblur()
blur
onfocus()
focus
onchange()
change
onmouseover()
mouseover
onmousout()
mouseout
onmousemove()
mousemove
onmousedown()
mousedown
onmouseup()
mouseup
onclick()
click
ondblclick()
dblclick
onkeydown()
keydown
onkeyup()
keyup
onkeyress()
keyres
onsubmit()
submit
onload()
ロード
onunload()
unload
新しいDOM 2の使い方は、addEventListener()という関数で観測できます.
capture/bubbleのパラメータはブール値で、Trueはcaptureを使うと表しています.Falseはbubble.Windows Internet ExplorerでもEvent Handlerを制定しています.atachEventです.フォーマットは以下の通りです.
どのような傍受をサポートしているかどうかをどう判断しますか?例えば:
W 3 C及びIEは、指定されたイベントの削除を同時にサポートしています.用途は、削除設定されたイベントで、フォーマットはそれぞれ以下の通りです.
W 3 Cフォーマット:
removeevent Listener(event,function,capture/bubble);
Windows IEのフォーマットは以下の通りです.
detachEvent(イベント、function);
一般的に、domオブジェクトに同じイベントをバインドすると、最後の一つだけ有効になります.
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
それなら、method 3だけ有効になります.Mozillaシリーズであれば、addEventListenerを使用して、複数のイベントを順番に実行することができます.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
実行順序は、method 1->method 2->method 3です.ieシリーズであれば、atachEventを使って、複数のイベントを順番に実現できます.
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
実行順序は、method 3->method 2->method 1です.==========================================================================================================
Mozia中:
addEvent Listenerの使い方
target.addEvent Listener(type,listener,useCapture);
target:文書ノード、document、windowまたはXMLtpRequest.
type:文字列、イベント名には、「click」、「mouseover」、「keydown」などが含まれていません.
listener:EventListenerインターフェースまたはJavaScriptの関数を実現しました.
useCapture:キャプチャーを使用するかどうかは、一般的にfalseを使用します.例えば、document.getElement ById(「testText」).addEvent Listener(「keydown」,function(event){alert(event.keyCode)},false);
IE中:
target.atachEvent(type,listener)
target:文書ノード、document、windowまたはXMLtpRequest.
type:文字列、イベント名には「on」、例えば「onclick」、「onmouseover」、「onkeydown」などがあります.
listener:EventListenerインターフェースまたはJavaScriptの関数を実現しました.例えば、document.getElemenntById(「txt」).atachEvent(「onclick」、function(event){alert(event.keyCode)};
W 3 C及びIEは、指定されたイベントの削除を同時にサポートしています.用途は、削除設定されたイベントで、フォーマットはそれぞれ以下の通りです.
removeevent Listener(event,function,capture/bubble);
Windows IEのフォーマットは以下の通りです.
detachEvent(イベント、function);
DOM 2の進化:
DOM 0 Event
DOM 2 Event
onblur()
blur
onfocus()
focus
onchange()
change
onmouseover()
mouseover
onmousout()
mouseout
onmousemove()
mousemove
onmousedown()
mousedown
onmouseup()
mouseup
onclick()
click
ondblclick()
dblclick
onkeydown()
keydown
onkeyup()
keyup
onkeyress()
keyres
onsubmit()
submit
onload()
ロード
onunload()
unload
新しいDOM 2の使い方は、addEventListener()という関数で観測できます.
addEventListener(event,function,capture/bubble);
パラメータeventは上記の表に示すように、functionは実行する関数であり、captureとbubbleはそれぞれW 3 Cで作成された二つの時間パターンであり、簡単に言うとcaptureはdocumentの最初から最後の行まで読んでからイベントを実行し、bubbleは指定された位置を探してからイベントを実行する.capture/bubbleのパラメータはブール値で、Trueはcaptureを使うと表しています.Falseはbubble.Windows Internet ExplorerでもEvent Handlerを制定しています.atachEventです.フォーマットは以下の通りです.
window.attachEvent(”submit”,myFunction());
特に、atachEventはcapture/bubbleのパラメータを指定する必要がありません.windows IE環境ではBbbleのパターンを使用しています.どのような傍受をサポートしているかどうかをどう判断しますか?例えば:
if (typeof window.addEventListener != “undefined”) {
window.addEventListener(”load”,rollover,false);
} else {
window.attachEvent(”onload”,rollover)
}
上記のtypeof window.addEvent Listener!=「undefined」プログラムコードは、使用者のブラウザがAddEvent Listenerというイベントモデルをサポートしているかどうかを判断できます.W 3 C及びIEは、指定されたイベントの削除を同時にサポートしています.用途は、削除設定されたイベントで、フォーマットはそれぞれ以下の通りです.
W 3 Cフォーマット:
removeevent Listener(event,function,capture/bubble);
Windows IEのフォーマットは以下の通りです.
detachEvent(イベント、function);