ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript の addEventListener() とattachEvent()_javascript スキルの違いの分析

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

WBOY
リリース: 2016-05-16 18:52:32
オリジナル
1477 人が閲覧しました
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 =”ブログ”>


”Brainia

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

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

W3C 形式:

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

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

detachEvent(event,function);

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート