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

在处理浏览器事件时，我已经开始为移动设备整合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);

任何建议或提示，感谢!

当前回答

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

这是在jQuery中通过使用.split(" ")处理的，然后在列表上迭代，为每种类型设置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

2012-01-10 00:31:48

其他回答

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

这是在jQuery中通过使用.split(" ")处理的，然后在列表上迭代，为每种类型设置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

2012-01-10 00:31:48

一种方法是:

const troll = document.getElementById('troll'); [' mousedown ', ' mouseup ']。forEach(type => { If (type === 'mousedown') { 巨魔。addEventListener(type， () => console.log('鼠标down')); ｝ Else if (type === 'mouseup') { 巨魔。addEventListener(type， () => console.log('鼠标打开')); ｝ })； img { 宽度:100 px; 光标:指针; ｝ < div id = "钓鱼" > <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll"> < / div >

2018-05-06 20:06:08

我有个更简单的解决办法

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

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

2017-07-15 23:12:14

理清以撒的回答:

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

EDIT

ES6 helper函数:

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

2017-07-14 07:14:40

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

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

然后使用它

document.body.addEventListeners("mousedown touchdown", myFunction)

2021-02-28 07:39:05

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

推荐文章

最新文章

标签