イベント
DOM Event
イベントリスナーの登録
以下の3種類の方法があります。いずれもクリックで関数が呼ばれるパターンで紹介します。
- 1) HTMLに直接書く
<button onclick="alert('Hello world!')">
- 2) DOM要素に書く
element.onclick = function( event ){ // ここに処理; };
- 3) addEventListener を使う
element.addEventListener( 'click', function(){ // ここに処理; }, false);
で、結論から言うと3つめの方法がベストです。
イベント一覧資料
- MDN イベントリファレンス
https://developer.mozilla.org/ja/docs/Web/Events - UI Events:W3C Working Draft, 04 August 2016
https://www.w3.org/TR/DOM-Level-3-Events/
モバイル特有のイベント
- touchstart
- touchend
- touchmove
- touchcancel
- touchenter
- touchleave
レスポンシブなサイトを作る際の考え方
とりあえず、PCのマウスのホバーにあたるものがスマホでは存在しないので、この点については、PCとスマホで書き分ける必要があります。一方、マウスのクリックイベントとスマホのタッチイベントについては・・・
- デバイスがタッチイベントに対応するか否かを判定し、 touchstart と click を使いわける方法がよく紹介されています。
var event = 'ontouchstart' in window ? 'touchstart' : 'click'; $('.button').on(event, function() { // ここに処理; });
ただしこの方法は、タッチとクリックの両方に反応する Windowsタブレットなどではタッチが優先されてマウス操作ができなくなる・・という問題があります。
- touch 系は使わずシンプルに click のみで設計するのもありです。
上記の使い分けは、clickイベントだと反応が遅い( touchend と click イベント間で 300〜350ms 遅延)ということが理由でしたが、スマホもタッチ操作において clickイベントを発生させるので、煩雑な UI 設計は避け、clickイベントだけで実装するという発想もありだと思います。
イベント伝搬について
ひとつの要素をクリックすると clickイベントが生成されますが、このとき当該要素から windowオブジェクトに至るまで、要素の先祖をさかのぼってイベントが生成されることを「イベント伝播」と言います。イベント伝搬は、DOMブランチ上のノードに定義されたイベントリスナーを event オブジェクトとともに呼び出します。以下の3つのフェーズに分類できます。
- イベントバブリングフェーズ
addEventListener()の3番目のパラメータが false(デフォルト)のケースelement.addEventListener( 'click', listener, false ) element.addEventListener( 'click', listener )
以下の図をご覧ください。
https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg
引用元:https://www.w3.org/TR/DOM-Level-3-Events/
- イベントターゲットフェーズ
イベントターゲットに登録されたすべてのリスナーが captureフラグにかかわらず呼び出されます。
- イベントキャプチャーフェーズ
addEventListenerの3番目のパラメータが trueのケースelement.addEventListener( 'click', listener, true )