Javascript の addEventListener() とattachEvent()_javascript スキルの違いの分析

Mozilla の場合:

addEventListener の使用方法:

target.addEventListener(type, listenr, useCapture);

target: document ノード, document,ウィンドウまたは XMLHttpRequest。
type: 文字列、イベント名。「クリック」、「マウスオーバー」、「キーダウン」などの「on」を除く。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。
useCapture: キャプチャを使用するかどうか。通常は false。例: document.getElementById("testText").addEventListener("keydown", function (event) {alert(event.keyCode); }, false);

IE の場合:

target.attachEvent(type,listener);
ターゲット: ドキュメント ノード、ドキュメント、ウィンドウ、または XMLHttpRequest。
type: 文字列、「onclick」、「onmouseover」、「onkeydown」などの「on」を含むイベント名。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。 例: document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C と IE は両方とも、指定されたイベントの削除をサポートしています。設定を削除するイベントです。形式は次のとおりです。

W3C 形式:

removeEventListener(event, function, capture/bubble); > Windows IE の形式は次のとおりです:

detachEvent(event, function);


target.addEventListener(type,listener, useCapture);
ターゲット ドキュメント ノード,ドキュメント、ウィンドウ、または XMLHttpRequest。
「クリック」、「マウスオーバー」、「キーダウン」などの「on」を除く文字列、イベント名を入力します。
リスナーは、EventListener インターフェイスまたは JavaScript の関数を実装します。
useCapture キャプチャを使用するかどうかは、後でイベント フローのセクションを読むとわかります。通常は false を使用します。
イベントがトリガーされると、次のような Event オブジェクトがイベント ハンドラーに渡されます。 document.getElementById ("testText").addEventListener("keydown", function (event) {alert(event.keyCode); }, false);
対応しているブラウザのバージョンが異なるため、ご利用の際はご注意ください
attachEvent メソッド ボタン onclick
addEventListener メソッド ボタン click IE で使用
Fox で使用 両方を使用する原則: 実行の優先順位は異なる場合があります。 以下の例を次のように説明します。
attachEvent メソッド、for特定のイベント 他の処理イベントをアタッチします。 (Mozilla シリーズはサポートされていません)
Mozilla シリーズでは addEventListener メソッドが使用されます
例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick =
document.getElementById("btn").onclick = method3; このように記述すると、medhot3 のみが実行されます。
var btn1Obj = document.getElementById("btn1") ; //オブジェクト .attachEvent(event,function);
btn1Obj.attachEvent("onclick",method2); ,method3); 実行順序は、method3->method2->method1
Mozilla シリーズの場合、このメソッドはサポートされていないため、addEventListener var btn1Obj = document.getElementById("btn1") を使用する必要があります。 ;
//element.addEventListener (type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false); 🎜>btn1Obj.addEventListener("click" , method3, false); 実行順序は、method1->method2->method3 です
例: (div は js の前に配置する必要があることに注意してください)




コードをコピーします


コードは次のとおりです。

;

クリック

>

从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

DOM1 协定:

Event Name	Description
onblur()	The element has lost focus (that is, it is not selected by the user).
onchange0	The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick0	The mouse has been clicked on an element.
ondblclick()	The mouse has been double-clicked on an element.
onfocus()	The element has gotten focus.
onkeydown()	A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress()	A keyboard key has been pressed while the element has focus.
onkeyup()	A keyboard key has been released while the element has focus.
onload()	The element has loaded (document, frameset, or image).
onmousedown()	A mouse button has been pressed.
onmousemove()	The mouse has been moved.
onmouseout()	The mouse has been moved off of or away from an element.
onmouseover()	The mouse has moved over an element.
onmouseup()	A mouse button has been released.
onreset()	The form element has been reset, such as when a form reset button is pressed.
onresize()	The window's size has been changed.
onselect()	The text of a form element has been selected.
onsubmit()	The form has been submitted.
onunload()	The document or frameset has been unloaded.

DOM2 的进化:

DOM 0 Event	DOM 2 Event
onblur()	blur
onfocus()	focus
onchange()	change
onmouseover()	mouseover
onmouseout()	mouseout
onmousemove()	mousemove
onmousedown()	mousedown
onmouseup()	mouseup
onclick()	click
ondblclick()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
onsubmit()	submit
onload()	load
onunload()	unload

新しい DOM2 の使用法は、addEventListener() 関数で確認できます。

addEventListener(イベント,関数,キャプチャ/バブル);

パラメータイベントは上表のとおりです。 関数は、W3C が策定した 2 つの時間モードです。
キャプチャ/バブルのパラメータはブール値です。True はキャプチャを意味し、False はバブルを意味します。Windows Internet Explorer にも EventHandler があります。これはattachEvent()であり、形式は次のとおりです:

window.attachEvent("submit",myFunction());

特別なのは、Windows IE 環境ではバブル モードが使用されるため、attachEvent でキャプチャ/バブル パラメータを指定する必要がないことです。イベントの使用法を示す画像のロールオーバーの例を次に示します。

”http://www.w3.org/TR/html4/strict.dtd ">

alt=”ホーム”>

alt=”概要”>

alt =”ブログ”>

上記の window.addEventListener != "unknown" プログラム コードは、ユーザーのブラウザが AddEventListener イベント モデルをサポートしているかどうかを判断できます。サポートしていない場合は、attachEvent を使用します。

W3C と IE は両方とも、指定されたイベントの削除をサポートしています。その目的は、設定されたイベントを削除することです。

W3C 形式:

removeEventListener(イベント,関数,キャプチャ/バブル);

Windows IE の形式は次のとおりです。

detachEvent(event,function);

データ参照: 第 14 章 - ブラウザと JavaScript、JavaScript のステップバイステップ、Steve Suehring 著

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。