1. ホーム
  2. javascript

[解決済み] 複数のイベントをリスナーにバインドする(JQueryを使用せずに)?

2022-04-21 17:45:18

質問

ブラウザのイベントを扱う中で、モバイル端末向けにSafariのtouchEventを取り入れるようになりました。その際 addEventListener が条件付きで積み重なっている。 このプロジェクトでは、JQueryを使用できません。

標準的なイベントリスナーです。

/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);

/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

JQueryの bind は、このように複数のイベントを許可しています。

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

JQueryの例のように、2つのイベントリスナーを組み合わせる方法はありますか? の例です。

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

何か提案やヒントがあれば、ぜひ教えてください。

解決方法は?

POJSでは、一度に1つのリスナーを追加します。同じ要素上の2つの異なるイベントに対して同じリスナーを追加することは一般的ではありません。その仕事をするために、例えば、あなた自身の小さな関数を書くことができます。

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

addListenerMulti(window, 'mousemove touchmove', function(){…});

コンセプトが伝われば幸いです。

編集部 2016-02-25

Dalgardさんのコメントで再確認しました。1つの要素の複数のイベントに対して同じリスナーを追加することは、様々なインターフェースタイプをカバーするために、今では一般的になっていると思いますし、Isaacさんの回答は、コードを減らすための組み込みメソッドをうまく使っています(コードが少ないこと自体は、必ずしもボーナスではないのですが)。ECMAScript 2015の矢印関数で拡張すると、次のようになります。

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

同様の戦略で、複数の要素に同じリスナーを追加することもできますが、その必要性は、イベントの委譲の指標になるかもしれません。