Liên kết nhiều sự kiện với người nghe (không có JQuery)?

Khi làm việc với các sự kiện trình duyệt, tôi đã bắt đầu kết hợp touchEvents của Safari cho thiết bị di động. Tôi thấy rằng đó addEventListenerlà chồng lên với điều kiện. Dự án này không thể sử dụng JQuery.

Một người nghe sự kiện tiêu chuẩn:

/* 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 bindcho phép nhiều sự kiện, như vậy:

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

Có cách nào để kết hợp hai trình lắng nghe sự kiện như trong ví dụ JQuery không? Ví dụ:

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

Bất kỳ đề xuất hoặc lời khuyên được đánh giá cao!

Trong POJS, bạn thêm một người nghe cùng một lúc. Việc thêm cùng một người nghe cho hai sự kiện khác nhau trên cùng một phần tử là không phổ biến. Bạn có thể viết hàm nhỏ của riêng bạn để thực hiện công việc, ví dụ:

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

Hy vọng nó cho thấy khái niệm.

Chỉnh sửa 2016 / 02-25

Nhận xét của Dalgard khiến tôi phải xem lại điều này. Tôi đoán việc thêm cùng một trình nghe cho nhiều sự kiện trên một phần tử là phổ biến hơn hiện nay để bao gồm các loại giao diện khác nhau được sử dụng và câu trả lời của Isaac cung cấp một cách sử dụng tốt các phương thức được xây dựng trong các phương thức để giảm mã (mặc dù bản thân ít mã hơn , không nhất thiết là một phần thưởng). Mở rộng với các chức năng mũi tên ECMAScript 2015 mang lại:

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

Một chiến lược tương tự có thể thêm cùng một người nghe vào nhiều yếu tố, nhưng nhu cầu thực hiện có thể là một chỉ báo cho sự kiện ủy nhiệm.

Một số cú pháp nhỏ gọn đạt được kết quả mong muốn, POJS:

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

Làm sạch câu trả lời của Isaac:

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

BIÊN TẬP

Chức năng trợ giúp ES6:

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

Cho tôi; mã này hoạt động tốt và là mã ngắn nhất để xử lý nhiều sự kiện có cùng chức năng (nội tuyến).

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

Tôi có một giải pháp đơn giản hơn cho bạn:

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

Tôi đã thử nghiệm điều này, nó hoạt động rất tốt, về mặt tích cực, nó nhỏ gọn và không phức tạp như các ví dụ khác ở đây.

AddEventListener lấy một chuỗi đơn giản đại diện cho event.type . Vì vậy, bạn cần phải viết một hàm tùy chỉnh để lặp qua nhiều sự kiện.

Điều này đang được xử lý trong jQuery bằng cách sử dụng .split ("") và sau đó lặp qua danh sách để đặt eventListener cho mỗi 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

Một cách để làm điều đó:

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>