JavaScript イベントの使用法の簡単な分析

この記事の例では、JavaScript イベントの使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

JavaScript はイベントを通じて HTML と対話します。

イベント フロー

イベント フローは、イベントのトリガー ルールとシーケンスを指定します。 DOM2 では、イベント フローに次の 3 つの段階が含まれると規定しています。イベントのキャプチャ -> ターゲットのトリガー -> イベントのバブリングです。 DOM2 では、イベント キャプチャ フェーズ中にイベント ハンドラーを呼び出さないことが規定されていますが、主要なブラウザはこれをサポートしていません。 DOM2 レベルのイベント ハンドラー操作関数のペアの 3 番目のパラメーターである addEventListener と RemoveEventListener は、これを DIY に変えます。これは妥協であり、初心者は DOM 管理が面倒だと思わせます。

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

上記jsのaddEventListenerとremoveEventListenerの3番目のパラメータをtrueに更新して、falseの場合の効果を比較すると、おおよそのイベントの流れが分かります。

イベント

イベントは、ユーザーまたはブラウザ自体によって実行される特定のアクションです。

イベントハンドラーの追加方法

イベントに応答する関数をイベントハンドラーと呼びます。

次の方法でイベント ハンドラーを指定します:

HTML 属性の指定。

要素が特定のイベントをサポートしている場合、対応する HTML 属性があり、この属性を使用してイベント ハンドラーを追加できます。

<button id="btn" onclick="alert(&#39;button click&#39;)">button</button>

DOM レベル 0。要素のイベント ハンドラー属性に関数を割り当てる: これは、JavaScript を使用してイベント ハンドラーを指定する従来の方法であり、現在でも使用されています。

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

DOM レベル 2。

addEventListener とremoveEventListener を通じて要素イベントを管理します。すべての DOM ノードにはこれら 2 つのメソッドが含まれており、どちらにも add の 3 つのパラメーターが含まれています:

addEventListener (イベント名、イベント処理関数、イベントのキャプチャ時にイベント ハンドラーを実行するかどうか)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

上記のコードでは、同じオブジェクトを指す参照は同じであると見なされ、同じ宣言により、同じ外観を持つ 2 つの異なるオブジェクトが生成されますが、ヒープ上の 2 つの異なる場所に格納されます。

イベント オブジェクト

DOM 上のイベントがトリガーされると、イベント オブジェクト イベントが生成されます。どのようなイベント ハンドラーが指定されても、イベント オブジェクトは渡されます。正確には、イベント オブジェクトは実行関数の呼び出しの実行環境で作成されることがわかります。スコープ チェーンの定義に従ってください。それは渡されます。

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

event には、アクセス イベントを制御するための豊富なメンバーが含まれています。以下は、すべてのイベントに共通のメンバーです。

target: イベントをトリガーするアクションが直接作用するターゲット要素。
currentTarget: これと同じ、イベント ハンドラーが動作する要素。
eventPhase: イベント ハンドラーが呼び出されるときのイベント フローのステージ。 3 つの値 1、2、および 3 は、それぞれイベント フローの 3 つの段階に対応します。
タイプ: イベントのタイプ。クリック イベントは文字列「click」に対応します。

イベント タイプ

イベント タイプは、次のカテゴリに分類されます:

UI イベント。
イベントに焦点を当てます。
マウスとホイールのイベント。
キーボードとテキストイベント。
複合イベント。
イベントを変更します。
HTML5 イベント。
デバイスイベント。
タッチイベントとジェスチャーイベント。