JavaScript/Event

イベント

DOM Event

イベントリスナーの登録

以下の３種類の方法があります。いずれもクリックで関数が呼ばれるパターンで紹介します。

• 1) HTMLに直接書く

  <button onclick="alert('Hello world!')">

• 2) DOM要素に書く

  element.onclick = function( event ){ 
   // ここに処理;
  };

• 3) addEventListener を使う

  element.addEventListener( 'click', function(){
    // ここに処理;
  }, false);

で、結論から言うと３つめの方法がベストです。

イベント一覧資料

• 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 オブジェクトとともに呼び出します。以下の３つのフェーズに分類できます。

• イベントバブリングフェーズ
  addEventListener()の３番目のパラメータが 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の３番目のパラメータが trueのケース

  element.addEventListener( 'click', listener, true )