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

IT技术 javascript jquery touch addeventlistener
2021-01-31 01:45:42

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

JQuerybind允许多个事件，如下所示：

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

有没有办法像 JQuery 示例中那样组合两个事件侦听器？前任：

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

任何建议或提示表示赞赏！

6个回答

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

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });
或者直接 ['mousemove', 'touchmove'].forEach(...)
2021-03-23 01:45:42
+1 并且它不需要«ECMAScript 2015 箭头函数» 扩展！;-)
2021-03-27 01:45:42
@IharobAlAsimi 我没有写代码。你说它不可读。显然不是因为你和我都能够阅读代码。这就像争论语法。99% 的程序员都能很好地阅读代码
2021-04-01 01:45:42
@zuckerburg 首先，您不是对数组进行硬编码，而是对字符串进行硬编码然后将其拆分，您真的确定这是要走的路吗？你确定这是最易读的写法吗？ ['mousemove', 'touchmove'].forEach(function(event) { window.addEventListener(event, handler);}); 不仅可读性更高，而且不必拆分字符串然后为结果数组中的每个项目运行一个函数，速度也会更快。
2021-04-05 01:45:42
@IharobAlAsimi 这段代码是 4 年前写的，那时我找到了我的空格键。字符串拆分与 OP 对字符串的使用有关
2021-04-05 01:45:42

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

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

@dalgard——现在触摸设备更常见，但仅适用于有限数量的事件（例如 mousemove 和 touchmove）。需要显示在物理项目之后命名事件的短视，指针移动可能更合适。它可以通过触摸或其他设备来实现。在鼠标（或鼠标）之前有 x/y 轮，我使用过的一些有手轮和脚轮（1970 年代 Stecometer）。还有轨迹球和球体，有些在 3d 中移动。
2021-03-13 01:45:42
谢谢你的句子"It is not common to add the same listener for two different events on the same element."有时（更环保）开发人员需要听到这个才能知道他们做得对:)
2021-03-26 01:45:42
@PedroFerreira——当然是的，目前使用的浏览器可能有一半以上不支持箭头功能，但玩起来很有趣，而且总是有Babel。;-)
2021-03-28 01:45:42
@RobG：我正在处理的 API 是 DOM，是的，它的缺点很多:) 但它也可能只是避免在相似的侦听器中出现重复代码的问题。
2021-04-05 01:45:42
你不是说“这并不罕见”吗？
2021-04-11 01:45:42

清理以撒的回答：

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

编辑

ES6 辅助函数：

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}
仅供参考：地图 != forEach
2021-04-10 01:45:42

ES2015：

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));
或者使用for...of循环
2021-04-03 01:45:42

给我; 这段代码工作正常，是处理具有相同（内联）函数的多个事件的最短代码。

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.");
    });
}
正是我正在寻找的。谢谢！
2021-04-08 01:45:42
其它你可能感兴趣的问题
上一篇HTML5 画布到 PNG 文件 下一篇如何从 Javascript 调用 Objective-C 方法并将数据发送回 iOS 中的 Javascript？