Birden çok olayı bir dinleyiciye bağlama (JQuery olmadan)?

Tarayıcı olaylarıyla çalışırken Safari'nin mobil cihazlar için touchEvents'ı kullanmaya başladım. addEventListenerŞartlar ile istiflendiğini görüyorum . Bu proje JQuery kullanamaz.

Standart bir olay dinleyicisi:

/* 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's bind, aşağıdakiler gibi birden fazla etkinliğe izin verir:

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

JQuery örneğinde olduğu gibi iki olay dinleyicisini birleştirmenin bir yolu var mı? örn:

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

Herhangi bir öneri veya ipucu takdir!

POJS'de, her seferinde bir dinleyici eklersiniz. Aynı öğeye iki farklı olay için aynı dinleyiciyi eklemek yaygın değildir. İşi yapmak için kendi küçük işlevinizi yazabilirsiniz, örneğin:

/* 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(){…});

Umarım kavramı gösterir.

Düzenle 2016-02-25

Dalgard'ın yorumu bunu tekrar ziyaret etmeme neden oldu. Tek bir öğeye birden çok olay için aynı dinleyiciyi eklemek, kullanılan çeşitli arayüz türlerini kapsamak için daha yaygındır ve Isaac'ın cevabı, kodu azaltmak için yerleşik yöntemlerin iyi bir kullanımını sunar (daha az kod olsa da, kendi başına) , mutlaka bir bonus değildir). ECMAScript 2015 ok fonksiyonları ile genişletilmiş:

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

Benzer bir strateji, aynı dinleyiciyi birden çok öğeye ekleyebilir, ancak bunun yapılması olay yetkisi için bir gösterge olabilir.

İstenen sonucu elde eden bazı kompakt sözdizimi POJS:

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

Isaac'in cevabını temizleme:

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

DÜZENLE

ES6 yardımcı işlevi:

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

Benim için; bu kod düzgün çalışır ve aynı (satır içi) işlevlere sahip birden çok olayı işlemek için en kısa koddur.

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.");
    });
}

ES2015:

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

Sizin için daha basit bir çözümüm var:

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

Bunu test ettim, harika çalışıyor, artı tarafta buradaki diğer örnekler gibi kompakt ve karmaşık değil.

AddEventListener, event.type öğesini temsil eden basit bir dize alır . Bu nedenle, birden fazla olayı yinelemek için özel bir işlev yazmanız gerekir.

Bu, jQuery'de .split ("") kullanılarak ve her biri için eventListeners'ı ayarlamak üzere liste üzerinden yinelenerek işlenir types.

    // 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

Bunu yapmanın bir yolu:

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>