ผูกหลายเหตุการณ์กับผู้ฟัง (โดยไม่มี JQuery)?

ในขณะที่ทำงานกับกิจกรรมของเบราว์เซอร์ฉันได้เริ่มรวมการทำงานของ touchEvents ของ Safari เข้ากับอุปกรณ์มือถือ ฉันพบว่า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's bindอนุญาตให้มีหลายเหตุการณ์เช่น:

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

มีวิธีการรวมสองฟังเหตุการณ์ในตัวอย่าง JQuery? อดีต:

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

ข้อเสนอแนะหรือคำแนะนำใด ๆ ที่ชื่นชม!

ใน POJS คุณเพิ่มผู้ฟังทีละคน ไม่ใช่เรื่องปกติที่จะเพิ่มผู้ฟังคนเดียวกันสำหรับสองเหตุการณ์ที่แตกต่างกันในองค์ประกอบเดียวกัน คุณสามารถเขียนฟังก์ชั่นเล็ก ๆ ของคุณเองเพื่อทำงานเช่น:

/* 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 ทำให้ฉันทบทวนสิ่งนี้อีกครั้ง ฉันเดาว่าการเพิ่ม listener เดียวกันสำหรับเหตุการณ์หลาย ๆ อย่างบนองค์ประกอบเดียวนั้นเป็นเรื่องธรรมดามากขึ้นในขณะนี้เพื่อครอบคลุมประเภทอินเตอร์เฟสที่ใช้งานอยู่และคำตอบของ Isaac เสนอวิธีการใช้งานที่ดีในตัวเพื่อลดรหัส (แม้ว่ารหัสน้อยกว่า ไม่จำเป็นต้องเป็นโบนัส) ขยายด้วยฟังก์ชั่นลูกศร ECMAScript 2015 ให้:

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

กลยุทธ์ที่คล้ายกันสามารถเพิ่มผู้ฟังเดียวกันให้กับองค์ประกอบหลาย ๆ องค์ประกอบ แต่ความจำเป็นที่ต้องทำนั่นอาจเป็นตัวบ่งชี้สำหรับการมอบหมายเหตุการณ์

ไวยากรณ์ขนาดกะทัดรัดบางตัวที่ได้ผลลัพธ์ที่ต้องการคือ POJS:

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

ทำความสะอาดคำตอบของ Isaac:

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

แก้ไข

ฟังก์ชั่นผู้ช่วย ES6:

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

สำหรับฉัน; รหัสนี้ใช้งานได้ดีและเป็นรหัสที่สั้นที่สุดในการจัดการหลายเหตุการณ์ด้วยฟังก์ชั่นเดียวกัน (แบบอินไลน์)

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));

ฉันมีทางออกที่ง่ายกว่าสำหรับคุณ:

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

ฉันได้ทดสอบสิ่งนี้มันใช้งานได้ดีในด้านบวกมันมีขนาดกะทัดรัดและไม่ซับซ้อนเหมือนตัวอย่างอื่น ๆ ที่นี่

addEventListenerใช้สตริงง่ายๆที่แสดงถึงevent.type ดังนั้นคุณต้องเขียนฟังก์ชั่นที่กำหนดเองเพื่อทำซ้ำหลาย ๆ เหตุการณ์

สิ่งนี้กำลังถูกจัดการใน jQuery โดยใช้. split ("") จากนั้นวนซ้ำรายการเพื่อตั้งค่า eventListeners สำหรับแต่ละ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

วิธีหนึ่งในการทำ:

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>