JavascriptのaddEventListener()とattachEvent()の区別分析
7216 ワード
イベントの使い方は、あるイベント(状況)がトリガーされた後にあるFunction、特にJavascriptを実行することであることはよく知られていますが、人気AJAXの触媒の下でJavascriptのEventの使い方を知ることがより重要です.ここではJavascriptのEventの使い方を紹介します.
Mozilla:addEventListenerの使い方:
target:ドキュメントノード、document、windowまたはXMLhttpRequest.type:文字列、イベント名、「click」、「mouseover」、「keydown」など、「on」を含まない.Listener:EventListenerインタフェースまたはJavaScriptの関数を実装します.useCapture:スナップを使用するかどうか、一般的にfalseを使用します.例:
IE中:
target:ドキュメントノード、document、windowまたはXMLhttpRequest.type:文字列、イベント名、「onclick」、「onmouseover」、「onkeydown」など、「on」を含む.Listener:EventListenerインタフェースまたはJavaScriptの関数を実装します.例:
W 3 CおよびIEは、指定されたイベントの削除を同時にサポートし、設定されたイベントを削除するためのものであり、フォーマットはそれぞれ以下の通りである:W 3 Cフォーマット:
Windows IEのフォーマットは以下の通りです.
targetドキュメントノード、document、windowまたはXMLhttpRequest.type文字列、イベント名、「click」、「mouseover」、「keydown」などの「on」は含まれません.ListenerはEventListenerインタフェースまたはJavaScriptの関数を実現します.useCaptureがスナップを使用するかどうかは、falseイベントでトリガーされるとイベントハンドラにEventオブジェクトが渡されるのが一般的です.たとえば、次のようなイベントフローのセクションを見てわかります.
適応ブラウザのバージョンが異なり、使用中にattachEventメソッドボタンonclick IEでaddEventListenerメソッドボタンclick foxで使用する原理に注意してください.実行の優先度が異なります.次の例では、あるイベントに他の処理イベントを付加するattachEventメソッドについて説明します.(Mozillaシリーズはサポートされていません)Mozillaシリーズの例としてaddEventListenerメソッドを使用します.
次のように書かれています.
Mozillaシリーズの場合、このメソッドはサポートされていません.addEventListenerを使用する必要があります.
例:(divはjsの前に置かなければならないことに注意してください)
W 3 Cの発展時間軸から見ると、DOM(Document Object Model)のモデルは2種類に分けられ、DOM 0とDOM 2に分けられる.数字から見ればDOM 0はもちろん古いプロトコルであることがわかる.
新しいDOM 2法はaddEventListener()という関数で観測できる.
パラメータeventは上記の表のようにfunctionが実行する関数である、captureとbubbleはそれぞれW 3 Cが作成した2つの時間パターンである、簡単に言えばcaptureはdocumentの開始から最後の行まで読んでからイベントを実行し、bubbleは指定の位置を探してからイベントを実行する.Capture/bubbleのパラメータはブール値、Trueはcapture、Falseはbubbleを表す.Windows Internet Explorerでは、attachEvent()というEventHandlerも制定されています.フォーマットは以下の通りです.
特にattachEventは、windows IE環境でBubbleを使用するモードであるため、capture/bubbleのパラメータを指定する必要はない.ここでは、画像のRolloverの例を用いて、イベントの使い方を表現します.
上記のtypeof window.addEventListener != 「undefined」プログラムコードは、利用者のブラウザがAddEventListenerというイベントモデルをサポートするか否かを判断し、サポートしなければattachEventを使用する.
W 3 CおよびIEは、指定されたイベントの削除を同時にサポートし、設定されたイベントの削除を目的としており、フォーマットはそれぞれ以下の通りである.
W 3 C形式:
Windows IEのフォーマットは以下の通りです.
Mozilla:addEventListenerの使い方:
target.addEventListener(type, listener, useCapture);target:ドキュメントノード、document、windowまたはXMLhttpRequest.type:文字列、イベント名、「click」、「mouseover」、「keydown」など、「on」を含まない.Listener:EventListenerインタフェースまたはJavaScriptの関数を実装します.useCapture:スナップを使用するかどうか、一般的にfalseを使用します.例:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);IE中:
target.attachEvent(type, listener);target:ドキュメントノード、document、windowまたはXMLhttpRequest.type:文字列、イベント名、「onclick」、「onmouseover」、「onkeydown」など、「on」を含む.Listener:EventListenerインタフェースまたはJavaScriptの関数を実装します.例:
document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});W 3 CおよびIEは、指定されたイベントの削除を同時にサポートし、設定されたイベントを削除するためのものであり、フォーマットはそれぞれ以下の通りである:W 3 Cフォーマット:
removeEventListener(event,function,capture/bubble);Windows IEのフォーマットは以下の通りです.
detachEvent(event,function);
target.addEventListener(type, listener, useCapture);targetドキュメントノード、document、windowまたはXMLhttpRequest.type文字列、イベント名、「click」、「mouseover」、「keydown」などの「on」は含まれません.ListenerはEventListenerインタフェースまたはJavaScriptの関数を実現します.useCaptureがスナップを使用するかどうかは、falseイベントでトリガーされるとイベントハンドラにEventオブジェクトが渡されるのが一般的です.たとえば、次のようなイベントフローのセクションを見てわかります.
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);適応ブラウザのバージョンが異なり、使用中にattachEventメソッドボタンonclick IEでaddEventListenerメソッドボタンclick foxで使用する原理に注意してください.実行の優先度が異なります.次の例では、あるイベントに他の処理イベントを付加するattachEventメソッドについて説明します.(Mozillaシリーズはサポートされていません)Mozillaシリーズの例としてaddEventListenerメソッドを使用します.
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;// , medhot3 次のように書かれています.
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);// method3->method2->method1Mozillaシリーズの場合、このメソッドはサポートされていません.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);// method1->method2->method3例:(divはjsの前に置かなければならないことに注意してください)
<html>
<head>
</head>
<body>
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;">
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;"> </div>
</div>
<div id="info"></div>
<script type="text/javascript">
var name1=document.getElementById('name1'); //
var name2=document.getElementById('name2'); //
var info=document.getElementById('info');
if(name1.attachEvent){ // attachEvent target
name1.attachEvent('onclick',function () { info.innerHTML += " " + "<br>"; });
name2.attachEvent('onclick',function () { info.innerHTML += " " + "<br>"; });
}else{
name1.addEventListener('click',function () { info.innerHTML += " " + "<br>"; },false);
name2.addEventListener('click',function () { info.innerHTML += " " + "<br>"; },false);
}
</script>
</body>
</html>W 3 Cの発展時間軸から見ると、DOM(Document Object Model)のモデルは2種類に分けられ、DOM 0とDOM 2に分けられる.数字から見ればDOM 0はもちろん古いプロトコルであることがわかる.
新しいDOM 2法はaddEventListener()という関数で観測できる.
addEventListener(event,function,capture/bubble);パラメータeventは上記の表のようにfunctionが実行する関数である、captureとbubbleはそれぞれW 3 Cが作成した2つの時間パターンである、簡単に言えばcaptureはdocumentの開始から最後の行まで読んでからイベントを実行し、bubbleは指定の位置を探してからイベントを実行する.Capture/bubbleのパラメータはブール値、Trueはcapture、Falseはbubbleを表す.Windows Internet Explorerでは、attachEvent()というEventHandlerも制定されています.フォーマットは以下の通りです.
window.attachEvent(”submit”,myFunction());特にattachEventは、windows IE環境でBubbleを使用するモードであるため、capture/bubbleのパラメータを指定する必要はない.ここでは、画像のRolloverの例を用いて、イベントの使い方を表現します.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “
<html>
<head>
<title>Rollover</title>
<script type=”text/javascript”>
function moveOver(imgObj) {
if (typeof window.addEventListener != “undefined”) {
imgObj.addEventListener(”mouseover”,function(){imgObj.src = imgObj.id +“_over.png”;}, false);
imgObj.addEventListener(”mouseout”, function(){imgObj.src = imgObj.id +“_default.png”;}, false);
} else {
imgObj.attachEvent(”onmouseover”,function(){imgObj.src = imgObj.id +“_over.png”;});
imgObj.attachEvent(”onmouseout”, function(){imgObj.src = imgObj.id +“_default.png”;});
}
}
function rollover() {
var images = document.getElementsByTagName(”img”);
var roll = new RegExp (”rollover”);
var preload = [];
for (var i = 0; i < images.length; i++) {
if (images[i].id.match(roll)) {
preload[i] = new Image();
preload[i].src = images[i].id + “_over.png”;
moveOver(images[i]);
}
}
}
if (typeof window.addEventListener != “undefined”) {
window.addEventListener(”load”,rollover,false);
} else {
window.attachEvent(”onload”,rollover);
}
</script>
</head>
<body>
<p>
<img id=”rollover_home” name=”img_home” src=”rollover_home_default.png” alt=”Home”>
</p>
<p>
<img id=”rollover_about” name=”img_about” src=”rollover_about_default.png” alt=”About”>
</p>
<p>
<img id=”rollover_blog” name=”img_blog” src=”rollover_blog_default.png” alt=”Blog”>
</p>
<p>
<img id=”logo” name=”img_logo” src=”logo.png” alt=”Braingia Logo”>
</p>
</body>
</html>上記のtypeof window.addEventListener != 「undefined」プログラムコードは、利用者のブラウザがAddEventListenerというイベントモデルをサポートするか否かを判断し、サポートしなければattachEventを使用する.
W 3 CおよびIEは、指定されたイベントの削除を同時にサポートし、設定されたイベントの削除を目的としており、フォーマットはそれぞれ以下の通りである.
W 3 C形式:
removeEventListener(event,function,capture/bubble);Windows IEのフォーマットは以下の通りです.
detachEvent(event,function);