绑定多个事件到一个监听器(没有JQuery)?

在处理浏览器事件时，我已经开始为移动设备整合Safari的touchEvents。我发现__abc0与条件句堆积在一起。这个项目不能使用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);

任何建议或提示，感谢!

236665 次浏览
小开
最佳答案

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

类似的策略可以将相同的侦听器添加到多个元素，但这样做的必要性可能是事件委托的指示器。

小开

AddEventListener接受一个表示event.type的简单字符串。因此，您需要编写一个自定义函数来迭代多个事件。

这在jQuery中是通过使用.split(" ")来处理的，然后迭代列表来为每个types设置eventlistener。

    // 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
小开

一些紧凑的语法，达到预期的结果，POJS:

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

对我来说;这段代码运行良好，是使用相同(内联)函数处理多个事件的最短代码。

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

理清以撒的回答:

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

编辑

ES6 helper函数:

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

我有个更简单的解决办法

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

我已经测试过了，它工作得很好，在好处方面，它是紧凑的，不复杂的，就像这里的其他例子一样。

小开

一种方法是:

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>

小开

还可以使用原型将自定义函数绑定到所有元素

Node.prototype.addEventListeners = function(eventNames, eventFunction){
for (eventName of eventNames.split(' '))
this.addEventListener(eventName, eventFunction);
}

然后使用它

document.body.addEventListeners("mousedown touchdown", myFunction)
小开 
// BAD: One for each event - Repeat code
textarea.addEventListener('keypress', (event) => callPreview);
textarea.addEventListener('change', (event) => callPreview);


// GOOD: One run for multiple events
"keypress change".split(" ").forEach((eventName) => textarea.addEventListener(eventName, callPreview));

提交答案