web-dev-qa-db-ja.com

複数のイベントをリスナーにバインドします（JQueryなし）？

ブラウザーイベントを操作しながら、モバイルデバイス用にSafariのtouchEventsを組み込み始めました。 addEventListenersが条件付きで積み重なっていることがわかりました。 このプロジェクトは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つのイベントリスナーを組み合わせる方法はありますか？ ex：

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

提案やヒントは大歓迎です！

javascriptjquerytouchaddeventlistener
125
johnkreitlow

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

ダルガードのコメントは私にこれを再訪させました。使用中のさまざまなインターフェイスタイプをカバーするために、1つの要素の複数のイベントに同じリスナーを追加するのがより一般的であり、Isaacの答えは組み込みメソッドを適切に使用してコードを削減します、必ずしもボーナスではありません）。 ECMAScript 2015の矢印関数で拡張すると、次のものが得られます。

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

同様の方法で同じリスナーを複数の要素に追加することもできますが、その必要はイベントの委任の指標になる可能性があります。

92
RobG

目的の結果を実現するコンパクトな構文POJS：

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });
106
Isaac

Isaacの答えの整理：

['mousemove', 'touchmove'].forEach(function(e) {
  window.addEventListener(e, mouseMoveHandler);
});

編集

ES6ヘルパー関数：

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}
44
pmrotule

私のために;このコードは正常に機能し、同じ（インライン）関数で複数のイベントを処理する最短のコードです。

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
for(event of eventList) {
    element.addEventListener(event, function() {
        // your function body...
        console.log("you inserted things by paste or typing etc.");
    });
}
10
user3796876

ES2015：

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));
9
ChrisTheButcher

私はあなたのためのよりシンプルなソリューションを持っています：

window.onload = window.onresize = (event) => {
    //Your Code Here
}

私はこれをテストし、それがうまく機能するようにしました。プラス面では、他の例のようにコンパクトで複雑ではありません。

2
user4891016

AddEventListenerevent.type を表す単純な文字列を取得します。したがって、複数のイベントを反復処理するカスタム関数を作成する必要があります。

これは、.split（ ""）を使用してjQueryで処理され、リストを反復処理して各typesのeventListenersを設定します。

    // Add elem as a property of the handle function
    // This is to prevent a memory leak with non-native events in IE.
    eventHandle.elem = elem;

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = types.split(" ");  

    var type, i = 0, namespaces;

    while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1
1
Selvakumar Arumugam

方法の1つ：

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
        if (type === 'mousedown') {
                troll.addEventListener(type, () => console.log('Mouse is down'));
        }
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});
img {
  width: 100px;
  cursor: pointer;
}
<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>
0
Reza Saadati