¿Vincular múltiples eventos a un oyente (sin JQuery)?
Mientras trabajaba con eventos del navegador, comencé a incorporar touchEvents de Safari para dispositivos móviles. Encuentro que addEventListenerlos s se acumulan con condicionales. Este proyecto no puede usar JQuery.
Un detector de eventos estándar:
/* 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 bindpermite múltiples eventos, así:
$(window).bind('mousemove touchmove', function(e) {
//do something;
});
¿Hay alguna manera de combinar los dos detectores de eventos como en el ejemplo de JQuery? ex:
window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);
¡Se agradece cualquier sugerencia o consejo!
Alguna sintaxis compacta que logra el resultado deseado, POJS:
"mousemove touchmove".split(" ").forEach(function(e){
window.addEventListener(e,mouseMoveHandler,false);
});
En POJS, agregas un oyente a la vez. No es común agregar el mismo oyente para dos eventos diferentes en el mismo elemento. Podrías escribir tu propia función pequeña para hacer el trabajo, por ejemplo:
/* 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(){…});
Ojalá muestre el concepto.
Editar 2016-02-25
El comentario de Dalgard me hizo volver a visitar esto. Supongo que agregar el mismo oyente para múltiples eventos en un elemento es más común ahora para cubrir los diversos tipos de interfaz en uso, y la respuesta de Isaac ofrece un buen uso de métodos integrados para reducir el código (aunque menos código es, por sí mismo). , no necesariamente una bonificación). Extendido con las funciones de flecha de ECMAScript 2015 proporciona:
function addListenerMulti(el, s, fn) {
s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}
Una estrategia similar podría agregar el mismo oyente a múltiples elementos, pero la necesidad de hacerlo podría ser un indicador de la delegación de eventos.
