JavaScriptによるイベントモデルの詳細説明（コード例）-jsチュートリアル-php.cn

JavaScriptによるイベントモデルの詳細説明（コード例）

不言

リリース： 2018-11-21 11:47:41

転載

1578 人が閲覧しました

この記事では、JavaScript でのイベントモデルの詳細な説明 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃イベント＃＃＃＃＃＃＃＃＃

ユーザーと Web ページ間の対話はイベントによって実現されます。イベントは当初、サーバーの負荷を分散する手段として使用されていました。独自の API 仕様。

イベントトリガーメカニズムに関して、両社は、ページのトリガーメカニズムは、特定の要素がクリックされたときに現在のターゲット要素のイベントをトリガーするだけではないと考えています。

例: ページに複数の同心円があります。最も内側の円をクリックすると、実際にはこの円の外側を含む円をクリックすることになります。両社はこの点で同意していますが、イベントストリームの伝播シーケンスは、イベントバブリングとイベントキャプチャという 2 つの異なるソリューションを使用して実装されています。

1. イベントバブリング

IE ブラウザは、古いバージョンから常にイベントバブリングメカニズムをサポートしています。いわゆるイベントバブリングとは、イベントストリームがより具体的な要素から開始され、継続することを意味します。非特定的な要素の拡散について。

はターゲット要素から親要素に伝播されます。

    <div>
        <div></div>
    </div>
    <script>
    function childEventHandler(event) {
        console.log(this);
        console.log("child 被点击了");
    }
    function parentEventHandler(event) {
        console.log(this);
        console.log("parent 被点击了");
    }
    function bodyEventHandler(event) {
        console.log(this);
        console.log("body 被点击了");
    }
    function htmlEventHandler(event) {
        console.log(this);
        console.log("html 被点击了");
    }
    function documentEventHandler(event) {
        console.log(this);
        console.log("document 被点击了");
    }
    function windowEventHandler(event) {
        console.log(this);
        console.log("window 被点击了");
    }
    var bodyEl = document.getElementsByTagName("body")[0];
    var htmlEl = document.getElementsByTagName("html")[0];
    var win = window;
    var parentEl = document.getElementById("parent");
    var childEl = document.getElementById("child");
    childEl.onclick = childEventHandler;
    parentEl.onclick = parentEventHandler;
    bodyEl.onclick = bodyEventHandler;
    htmlEl.onclick = htmlEventHandler;
    document.onclick = documentEventHandler;
    win.onclick = windowEventHandler;
    </script>

ログイン後にコピー

下図のように、子のidを持つ要素をクリックすると、子からウィンドウオブジェクトにイベントフローが伝播します。

JavaScriptによるイベントモデルの詳細説明（コード例）

最新のブラウザはすべてイベントバブリングをサポートしています。

2. イベントキャプチャ

Netscape によるイベントキャプチャは、イベントストリームが不特定の要素からトリガーされ、その後特定の要素に広がります。つまり、親要素からターゲット要素に伝播されます。

JavaScriptによるイベントモデルの詳細説明（コード例）

イベントキャプチャは IE 9 からサポートされ、古いバージョンのブラウザと互換性がないため、使用する人は少なくなります。

3. イベントフロー

DOM では、イベントにはイベントキャプチャ、ターゲットステージ、イベントバブリングの 3 つのステージが含まれると規定しています。

IE 9 以降のブラウザでは、イベントフローの順序として、最初にイベントキャプチャが行われ、イベントがインターセプトされ、次にターゲットステージに入り、実際のターゲットがイベントを受信し、最後にイベントがバブルアップすることが規定されています。このステージがイベントに応答していることを確認できます。

前の子要素を例に挙げると、子要素がイベントを受け取るまで (ウィンドウから親へ)、それがイベントのキャプチャ段階です。子要素に関しては、この時点でイベントが処理され、その後ウィンドウオブジェクトにバブリングされます。バブリング段階でもイベントを処理できます。イベントを処理できるイベントバブリングの特徴を踏まえて、それに関連するイベント委任の仕組みについては後述します。

JavaScriptによるイベントモデルの詳細説明（コード例）

4. イベントバインディング

HTML とイベント間のバインディングには 3 つの形式があります:

1. 
<div></div>

2. 

var childEl = document.getElementById("child");
childEl.onclick = function() {
    console.log('hello');
}

3. 
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
    console.log('hello');
}, false);

ログイン後にコピー

JavaScriptこれはシングルスレッド言語であり、要素でイベントがトリガーされると、イベントにバインドされた関数があるかどうかを確認し、存在しない場合は何も行いません。関数はイベントキューに配置され、実行後にメインスレッドイベントが実行されるのを待ちます。

上記のコードの最初のバインディングは HTML にイベントを書き込みますが、この方法でコードを記述することは推奨されません。

2 番目のタイプのバインディングは、イベントを要素オブジェクトにバインドします。この書き込み方法は主にイベントを上書きするのが簡単です。

3 番目のバインディング、まず 3 番目のパラメーターはブール値で、デフォルトは false です。これは、イベントハンドラーがイベントバブリングステージで呼び出されることを意味します。これが true の場合、それは、イベントハンドラはイベントキャプチャ関数で呼び出されます。

イベントを処理したいが、要素のイベントバインディングは処理したくない場合、メモリリークが発生しやすい場合は、要素のイベントバインディングを空に設定する必要があります。

第一种写法：
childEl.onclick = null;


第三种写法：
function eventHandler() {
    console.log('hello');
}

childEl.addEventListener('click', eventHandler, false);

childEl.removeEventListener('click', eventHandler, false);

ログイン後にコピー

5. イベントの委任 (イベントプロキシ)

イベントの委任は、より具体的な要素から開始され、不特定の要素に広がり続けます。

まず、リスト ul がある場合、リスト要素の li クリックごとにイベントハンドラーがトリガーされます。要素に 1 つずつイベントをバインドすると、効率は明らかに悪くなります。

同時に、新しい要素が追加されると、イベントが正常にバインドされない場合があります。一緒に見てみましょう:

ログイン後にコピー