在处理浏览器事件时,我已经开始为移动设备整合Safari的touchEvents。我发现addeventlistener与条件语句堆积在一起。这个项目不能使用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的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
达加德的评论让我重新审视了这个问题。我想,现在在一个元素上为多个事件添加相同的侦听器更常见,以覆盖正在使用的各种接口类型,Isaac的回答提供了很好的使用内置方法来减少代码(尽管较少的代码本身并不一定是一种奖励)。扩展与ECMAScript 2015箭头函数给出:
function addListenerMulti(el, s, fn) {
s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}
类似的策略可以将相同的侦听器添加到多个元素,但这样做的必要性可能是事件委托的指示器。