DOMイベントフローの詳しい解説_基礎知識-jsチュートリアル-php.cn

DOMイベントフローの詳しい解説_基礎知識

WBOY

リリース： 2016-05-16 16:18:58

オリジナル

1399 人が閲覧しました

1. バブルイベント

ブラウザのイベントモデルは、キャプチャイベントとバブリングイベントの 2 つのタイプに分類されます。 IE はイベントのキャプチャをサポートしていないため、以下では主にバブリングイベントを説明として使用します。
(バブリングと呼ばれます) バブリングとは、最も具体的なイベントから最も具体性の低いイベントまで、イベントが 1 つずつトリガーされることを意味します。

コードをコピーしますコードは次のとおりです:

')">クリックしてください

<スクリプトタイプ="text/javascript">
関数 add(sText) {
var ulo = document.getElementById("display");
ulo.innerHTML = sText;
}

上記の 3 つの関数はすべて、onclick 関数を追加します。最初に p 要素が実行され、次に div が実行され、最後に body が実行された後にトリガーされます。

ところで、ここでイベントのキャプチャについて思い出させてください。その順序はバブリングイベントとはまったく逆です。

2. イベント監視

イベントには応答する関数が必要です。この種の関数は通常、イベントハンドラーと呼ばれ、イベントが発生するかどうかをリアルタイムで監視します。イベントリスニング機能はブラウザーごとに大きく異なります。

i. onclick メソッドの使用など、ほとんどすべてのタグがこのメソッドをサポートしています。そしてブラウザの互換性も非常に高いです

行動の説明、イベントの分離。

一般的に、監視には次の方法が使用されます

コードをコピーしますコードは次のとおりです:

クリック

<スクリプトタイプ="text/javascript">

var opp = document.getElementById("me") // イベントを検索 

opp.onclick = function(){ //イベント関数を設定

alert("クリックされました!")

}

上で紹介した 2 つのメソッドは非常に便利で、いくつかの小さな関数を作成および処理するときに Everbright 開発者に愛用されています。ただし、同じイベントの場合。 p マークの onclick 関数など、追加できる関数は 1 つだけです。そのため、IE には独自のメソッドが用意されています。

ii.IEでのリスニング方法

初期の IE ブラウザでは、各要素に時間監視を処理する 2 つのメソッドがあります。

それぞれ、attachEvent() と detachEnevt() です。
関数名からも分かるように、attachEnevt()は要素にイベント処理を追加する関数であり、detachEvent()は要素のlisten関数を削除する関数です。構文は次のとおりです:

[オブジェクト].attachEvent("enevt_handler","fnHandler");

[オブジェクト].detachEvent("enevt_handler","fnHandler");

このうち enevt_handler はよく使われる onclick、onload、onmouseover などを表します。
fnHandler は、リスニング関数の名前です。
前のセクションのイベントでは、リッスン関数を追加する代わりに、attachEvent() メソッドを使用して、一度クリックしたときにリッスン関数を削除し、次のクリック後にリスニング関数が実行されないようにすることができます。。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 fnclick() {
alert("クリックされました!");
oP.detachEvent("onclick","fnclick");
}
var oP;
window.onload = function() {
oP = document.getElementById("oop") // オブジェクトが見つかりました
Op.attachevent ("Onclick", "FNCLICK") // 監視機能を追加します

}

iii. 複数のリスニングイベントを追加します (つまり)

コードをコピーします

コードは次のとおりです: <スクリプト言語="javascript"> 関数 fnClick1(){

alert("fnClick1 によってクリックされました");

}
関数 fnClick2(){
alert("fnClick2 によってクリックされました");
//oP.detachEvent("onclick",fnClick1) //リスニング関数 1
を削除します。 }
var oP;
window.onload = function(){
oP = document.getElementById("myP"); // オブジェクトが見つかりました
oP.attachEvent("onclick",fnClick1); //リスニング関数を追加 1
oP.attachEvent("onclick",fnClick2) //リスニング関数2を追加
}

3. 標準 DOM イベント監視

ie の 2 つのメソッドと比較すると、標準 DOM も 2 つのメソッドを使用してそれぞれリスニング関数を追加および削除します。それはaddEventListener()とremoveEventListener()

です。 ie とは異なり、これら 2 つの関数は 3 つのパラメーター、つまりイベントの名前、割り当てられる関数名、およびバブリングフェーズで使用されるかキャプチャフェーズで使用されるかどうかを受け入れます。キャプチャフェーズのパラメータは true、バブリングフェーズのパラメータは false です。構文は次のとおりです:

コードをコピーします

コードは次のとおりです: [オブジェクト].addEventListener("イベント名",fnHandler,bCapture); [オブジェクト].removeEventListener("イベント名",fnHandler,bCapture);

これら 2 つの関数の使い方は基本的に Ie と同様ですが、event_name の名前が Ie では "onclick"、"onmouseover" ではなく "click"、"mouseover" などになっていることに注意してください。 

さらに、3 番目のパラメーター bCapture は通常 false、バブリング段階に設定されます。

標準の DOM イベントリスニング方法:

コードをコピー

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

<スクリプト言語="javascript">
function fnClick1() {
alert("クリックされました 1");
oP.removeEventListener("click", fnClick1, false);
}

関数 fnClick2() {
alert("クリックされました 2");
}

window.onload = function() {
oP = document.getElementById("myP");
oP.addEventListener("クリック", fnClick1, false);
oP.addEventListener("click", fnClick2, false);
}
＆lt; p id = "myp"＆gt; click me＆lt;/p＆gt;

特定の実行シーケンスをテストできます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。