ホームページ > 記事 > ウェブフロントエンド > JSでのイベントモデルの解析

JSでのイベントモデルの解析

不言オリジナル: 2018-07-14 14:49:311306ブラウズ

この記事では主に JavaScript のイベントモデルを紹介します。これを必要な友達に共有します。

イベントはブラウザーとドキュメントです。ボタンをクリックする、フォームに記入するなどのインタラクションの瞬間、これは Javascript と HTML の間の橋渡しとなります。 DOM はツリー構造です。イベントが両方の親ノードに同時にバインドされている場合、子ノードがトリガーされると、これら 2 つのイベントの発生順序には、イベントストリームの内容が関係します。ページは受け付けられます。イベントフローは、ページからイベントを受信する順序を記述しますが、さらに興味深いのは、IE 開発チームと Netscape 開発チームが実際にほぼ完全に反対の概念を提案したことです。 IE のイベントフローはイベントバブリングフローですが、Netscape Communicator のイベントフローはイベントキャプチャフローです。

そのため、イベントの流れは主にイベントバブリングとイベントキャプチャの2種類に分かれます。

IE のイベントフローはイベントバブリングと呼ばれます。つまり、イベントは最初に最も具体的な要素 (ドキュメント内で最も深いネストレベルを持つノード) によって受信され、その後、より具体的ではないノード (ドキュメント) に上方に伝播します。 Netscape チームが提案したもう 1 つのイベントストリームは、イベントキャプチャと呼ばれます。イベントキャプチャの考え方は、特定性の低いノードがイベントをより早く受信し、最も特定性の高いノードが最後にイベントを受信するというものです。キャプチャの目的は、イベントが目的の宛先に到達する前にイベントをキャプチャすることです。

DOM2 レベルのイベントで指定されるイベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブリングステージの 3 つのステージが含まれます。最初に行われるのはイベントのキャプチャであり、イベントを傍受する機会が提供されます。その後、実際のターゲットがイベントを受信します。最後のフェーズはバブリングフェーズで、イベントに応答できます。

1. DOM0 レベルのイベントモデル

このモデルでは、イベントは伝播しません。イベントの流れ。イベントバインディングリスニング関数は比較的単純です。JavaScript を使用してイベントハンドラーを指定するには、まず操作対象のオブジェクトへの参照を取得する必要があります。 W 各要素 (Window および Document を含む) には独自のイベント処理属性があります。これらの属性は通常、onClick のように小文字です。この属性を関数に設定することで、イベントハンドラーを指定できます:

 btn = document.getElementById("myBtn"= "Clicked!"

//HTML事件处理程序<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

2. DOM2 レベルのイベントモデル

このモデルでは、次の 3 つのプロセスに分割されます。キャプチャフェーズ、ターゲットフェーズ 7 イベントバブリングフェーズ

イベントキャプチャフェーズ (キャプチャフェーズ)。イベントはドキュメントからターゲット要素まで伝播し、通過するノードがイベントリスニング関数にバインドされているかどうかを確認し、バインドされている場合は実行します。

イベント処理フェーズ（ターゲットフェーズ）。イベントがターゲット要素に到達すると、ターゲット要素の listen 関数がトリガーされます。
イベントのバブリング段階。イベントはターゲット要素からドキュメントにバブルし、通過するノードがイベントリスニング関数にバインドされているかどうかを確認し、バインドされている場合は実行します。
DOM2 レベルでは、イベントハンドラーの指定と削除の操作を処理するための 2 つのメソッド、addEventListener() と RemoveEventListener() が定義されています。すべての DOM ノードにはこれら 2 つのメソッドが含まれており、処理されるイベントの名前、イベントハンドラーとしての関数、およびブール値の 3 つのパラメーターがあります。クリックイベントにイベントハンドラーを追加するには、次を使用できます:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

このとき、実行順序は順次実行です: "myBtn" "Hello kid"。 IE では、実行順序はまったく逆になります。 ① イベント監視関数の削除方法は以下の通りです。ここでの

RrreerReee

は、パラメータの削除と追加の際にパラメータの導入が必要となるため、関数式の形式でのみイベント処理プログラムとして使用できます。削除時のアプリケーション使用されるパラメータは同じです。匿名関数によって追加されたイベントリスニング関数は削除できません。

3. IE のイベントモデル

IE は、DOM と同様の 2 つのメソッド、attachEvent() と detachEvent() を使用します。どちらのメソッドも、イベントハンドラー名とイベントハンドラー関数という同じ 2 つのパラメーターを受け入れます。 IE8 以前のバージョンはイベントバブリングのみをサポートしているため、attachEvent() を通じて追加されたイベントハンドラーはバブリングフェーズに追加されます。 AttachEvent() を使用してイベントハンドラーをボタンに追加すると、次のように使用できます。トリガーされた

target イベントのターゲットを表します

currentTarget はイベントハンドラーが現在イベントを処理している要素を表します

cancelable (Boolean) 表明是否可以取消事件的默认行为

bubbles （Boolean）表明事件是否冒泡

perventDefault()取消事件的默认行为。如果cancelable为true，则可以使用这个方法

stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法。

IE中的事件对象

type表示被触发的事件类型
srcElement表示事件的目标
cancelBubble （Boolean）默认是false，将其设为true就可以取消事件冒泡
returnValue (Boolean) 默认是true，将其设置为false就可以取消事件的默认行为

有了上面的事件对象，就可以写出跨浏览器的事件对象封装成事件包裹了。

var EventUtil = {
    addHandler: function(element, type, handler){        
    if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler){        
    if (element.removeEventListener){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;                  //DOM0        }
    },

    getEvent: function(event){        
    return event ? event : window.event;
    },

    getTarget: function(event){        
    return event.target || event.srcElement;
    },

    preventDefault: function(event){        
    if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event){        
    if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }};

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

JSでのイベントモデルの解析

関連記事