JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベントモデルでは、オブジェクトの addEventListener() メソッドを呼び出すことによってイベントが登録されます。使用方法は次のとおりです。
element.addEventListener(文字列型、関数リスナー、ブール値 useCaptrue);

パラメータの説明は次のとおりです。

type: 登録されたイベントのタイプ名。イベントタイプはイベント属性とは異なります。イベントタイプ名には「on」というプレフィックスは付きません。たとえば、イベント属性 onclick の場合、対応するイベントタイプは click です。
リスナー: リスニング機能、つまりイベント処理機能。この関数は、指定されたタイプのイベントが発生したときに呼び出されます。この関数が呼び出されると、デフォルトで渡される唯一の引数はイベントオブジェクトです。
useCaptrue: はブール値です。 true の場合、指定されたイベントハンドラーはイベント伝播のキャプチャフェーズ中にトリガーされます。false の場合、イベントハンドラーはバブリングフェーズ中にトリガーされます。

例1

次の例では、addEventListener() を使用して、すべてのボタンのクリックイベントを登録します。まず、document の getElementsByTagName() メソッドを呼び出してすべてのボタンオブジェクトを取得します。次に、for ステートメントを使用してボタンセット (btn) を走査し、addEventListener() メソッドを使用して各ボタンのイベント関数を登録し、現在のオブジェクトによって表示されるテキストを取得します。

<button id="btn1" onclick="btn1();">ボタン 1</button>
<button id="btn2" onclick="btn2(event);">ボタン 2</button>
<スクリプト>
  var btn = document.getElementsByTagName("button"); //すべてのボタンをキャプチャする for(var i in btn){ //ボタンコレクションを走査する btn[i].addEventListener("click", function(){
    アラート(this.innerHTML);
  }, true); //各ボタンオブジェクトのイベント処理関数を登録し、キャプチャフェーズでの応答を定義します}
</スクリプト>

ブラウザでプレビューし、さまざまなボタンをクリックすると、ブラウザにボタン名が自動的に表示されます。効果は図に示されています:

addEventListener() メソッドを使用して、複数のオブジェクトに対して同じイベント処理関数を登録したり、同じオブジェクトに対して複数のイベント処理関数を登録したりします。同じオブジェクトに対して複数のイベントハンドラーを登録することは、モジュール開発に非常に便利です。

例2

次の例では、段落テキストに対して mouseover と mouseout の 2 つのイベントが登録されています。カーソルが段落テキスト上に移動すると、青い背景で表示され、カーソルが段落テキストの外に出ると、自動的に赤い背景で表示されます。この方法では、ドキュメント構造を破壊したり、段落テキストに複数のイベント属性を追加したりする必要がなくなります。

<p id="p1">オブジェクトに複数のイベントを登録する</p>
<スクリプト>
  var p1 = document.getElementById("p1"); //段落要素のハンドルを取得します p1.addEventListener("mouseover", function () {
    this.style.background = '青';
  }, true); //段落要素の最初のイベントハンドラを登録します p1.addEventListener("mouseout", function () {
    this.style.background = '青';
  }, true); //段落要素の2番目のイベントハンドラを登録します</script>

IE イベントモデルは、attachEvent() メソッドを使用してイベントを登録します。使用方法は次のとおりです。

要素.attachEvent(etype、イベント名)

パラメータリストは次のとおりです。

etype: onclick、onkeyup、onmousemove などのイベントタイプを設定します。
eventName: イベント処理関数であるイベント名を設定します。

例3

次の例では、段落タグ <p> に mouseover と mouseout の 2 つのイベントが登録されています。カーソルが通過すると段落テキストの背景色は青になり、カーソルが離れると背景色は赤になります。

<p id="p1">オブジェクトに複数のイベントを登録する</p>
<スクリプト>
  var p1 = document.getElementById("p1"); //段落要素をキャプチャ p1.attachEvent("onmouseover", function () {
    this.style.background = '青';
  }); //マウスオーバーイベントを登録 p1.attachEvent("onmouseout", function () {
    this.style.background = '赤';
  }); // マウスアウトイベントを登録する</script>

イベントを登録するためにattachEvent()を使用すると、イベント処理関数の呼び出しオブジェクトは現在のイベントオブジェクト自体ではなく、ウィンドウオブジェクトになります。したがって、イベント関数内の this は現在のオブジェクトではなく、ウィンドウを指します。現在のオブジェクトを取得する場合は、イベントの srcElement 属性を使用する必要があります。

IE イベントモデルの attachmentEvent() メソッドの最初のパラメーターはイベントタイプ名であり、先頭に on を付ける必要がります。addEventListener() メソッドを使用する場合、click のように on プレフィックスは不要です。

登録イベントを実装するための JS addEventListener() および attachEvent() メソッドに関するこの記事はこれで終わりです。関連する JS addEventListener() および attachEvent() コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: