LogoMark.png

JavaScript/Event

イベント

DOM Event

イベントリスナーの登録

以下の3種類の方法があります。いずれもクリックで関数が呼ばれるパターンで紹介します。結論から言うと 3) 以降の addEventListener を使う方法がおすすめです。

事例 4), 5) の listener とは

事例 6) の listenerObject とは

listenerObject は イベントリスナーインタフェースを実装するオブジェクトで、引数を利用したい場合などに、この方法が使われます。以下の例では、イベントハンドラ関数 myFunction の中で this.number を使うことによって i の値を参照することができます。

function myFunction(event) {
   :
   let n = this.number;    ← 引数として渡された i の値が入ります。

 :

}

element.addEventListener( 'click', 
   { number : i ,  handleEvent :myFunction },
   false);

参考:6) の方法を使ったサンプル > JavaScript/ImageSwitcher

イベントオブジェクトとは

イベントが発生した際、listener(登録したコールバック関数)には、発生したイベントの情報が格納された「イベントオブジェクト(一般に eevent を用いることが多い)」が一番目の引数として渡されます。 例えば、'click' イベントに対する listener関数の名前が myFunction とすると、以下のように記述することでイベントが発生した要素のIDを確認できます。

function myFunction( event ){
   alert(event.target.id);
}

element.addEventListener( 'click', myFunction,  false);

イベントオブジェクトからは以下のような情報が取得できます。

プロパティ名説明
event.targetイベントが発生したDOM要素
event.target.idID名
event.target.classNameクラス名
event.target.innerHTMLHTML要素
event.target.style要素のスタイル
event.target.childNodes子要素
event.target.parentNodes親要素
event.target.nextElementSibling次の要素
event.typeイベントの種類を表す文字列
event.screenX / event.screenYモニタ画面上の座標
event.pageX / event.pageYモニタ画面上の座標
event.clientX / event.clientYウインドウ上の座標
event.offsetX / event.offsetY要素上の座標
event.target.offsetWidth / event.target.offsetHeight幅と高さ
event.timeStampイベント発生までの経過時間(ミリ秒)
event.eventPhaseイベントのフェーズ


イベント伝搬について

ひとつの要素をクリックすると clickイベントが生成されますが、このとき当該要素から windowオブジェクトに至るまで、要素の先祖をさかのぼってイベントが生成されることを「イベント伝播」と言います。イベント伝搬は、DOMブランチ上のノードに定義されたイベントリスナーを event オブジェクトとともに呼び出します。以下の3つのフェーズに分類できます。


イベント一覧資料



APPENDIX

モバイル特有のイベント

レスポンシブなサイトを作る際の考え方(jQuery)

とりあえず、PCのマウスのホバーにあたるものがスマホでは存在しないので、この点については、PCとスマホで書き分ける必要があります。一方、マウスのクリックイベントとスマホのタッチイベントについては・・・




PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-06-07 (月) 18:35:49