[解決済み] 複数のイベントをリスナーにバインドする(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));
}
同様の戦略で、複数の要素に同じリスナーを追加することもできますが、その必要性は、イベントの委譲の指標になるかもしれません。
関連
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueにシンプルなメモ帳機能を実装
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み] テスト
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された