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

Question

Trong 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 addEventListener s đang xếp chồng lên nhau với các điều kiện. Dự án này không thể sử dụng JQuery.

Một sự kiện tiêu chuẩn nghe:

/* 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 cho 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 người nghe sự kiện như trong ví dụ JQuery? ví dụ:

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

Bất kỳ đề xuất hoặc mẹo nào được đánh giá cao!

Answer 1

Trong POJS, bạn thêm một người nghe mỗi lần. Nó không phải là phổ biến để 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ử. Bạn có thể viết chức năng nhỏ của riêng mình để 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ó sẽ hiển thị khái niệm.

Sửa 2016-02-25

bình luận Dalgard của gây ra cho tôi xem lại này. Tôi đoán việc thêm cùng một trình lắng nghe cho nhiều sự kiện trên một phần tử phổ biến hơn là bao gồm các loại giao diện khác nhau đang 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 tích hợp để giảm mã (mặc dù ít mã hơn , không nhất thiết phải là tiền thưởng). Mở rộng với chức năng mũi tên ECMAScript 2015 cho:

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 cần phải làm điều đó có thể là chỉ báo cho sự kiện.

Answer 2

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 chức năng 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 eventListeners 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 

Answer 3

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

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

Answer 4

Đối với 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."); 
    }); 
} 

Answer 5

ES2015:

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

Answer 6

Dọn dẹp Isaac câu trả lời:

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

Answer 7

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

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

Tôi đã thử nghiệm này một nó hoạt động tuyệt vời, ở mặt cộng với nó là nhỏ gọn và uncomplica ted như các ví dụ khác ở đây.