将多个事件绑定到侦听器（没有 JQuery）？

Question

在处理浏览器事件时，我开始将 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);

如有任何建议或提示，我们将不胜感激！

Answer 1

一些可以实现所需结果的紧凑语法，POJS：

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

Answer 2

在 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

Dalgard 的评论让我重新审视了这一点。我想现在更常见的是在一个元素上为多个事件添加相同的侦听器，以涵盖正在使用的各种接口类型，并且 Isaac 的答案提供了一种很好的使用内置方法来减少代码的方法（尽管代码本身较少） ，不一定是奖金）。使用 ECMAScript 2015 箭头函数扩展给出：

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

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

Answer 3

清理 Isaac 的答案：

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

编辑

ES6 辅助函数：

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

Answer 4

为我;该代码工作正常，并且是使用相同（内联）函数处理多个事件的最短代码。

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

我为您提供了一个更简单的解决方案：

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

我已经对此进行了测试，它效果很好，从好的方面来说，它像这里的其他示例一样紧凑且简单。

Answer 7

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

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

然后使用它

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

Answer 8

一种方法：

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>

Answer 9

AddEventListener 采用一个表示 事件类型。因此，您需要编写一个自定义函数来迭代多个事件。

这是在 jQuery 中通过使用 .split(" ") 进行处理，然后迭代列表以设置每个类型的事件监听器。

    // 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 10

下面是一个小函数，可将此功能注入到 HTMLElement 类中，使其像任何其他元素方法一样可访问：

HTMLElement.prototype.addEventListeners = function addEventListeners(events, handler, ...args) {
    // Allow for easy assignment of one listener to multiple events
    if ((events instanceof Array) && (handler instanceof Function)) {
        events.filter(e=>isString(e)).forEach((evtype) => {
            this.addEventListener(evtype, handler, ...args);
        });
    } else {
        throw new TypeError(`${this.constructor.name}.addEventListeners(): The events must be an Array of Strings and the handler must be a Function! (got events:${events?.constructor?.name||events} and handler:${handler?.constructor?.name||handler})`);
    }
}

此代码注入方法 addEventListeners(events, handler, ...args) 到 HTMLElement 基类中，因此每个 HTML 元素都会获取它。
例如，要让元素在发生事件后打印到控制台，请执行以下操作：

document.getElementById('elmnt-with-many-actions').addEventListeners(
    [
        'click',
        'dblclick',
        'focus',
        'blur'
    ], (event) => {
        console.log('Something happened: %O', event);
    },
    {once:true}
);

Answer 11

// 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));