Question

我想使用addEventListener(type, listenerFunction)为所有类型的MouseEvent添加相同的listenerFunction。我可以通过手动添加它们来实现这一点，

addEventListener('clicked', listener);
addEventListener('mouseOver', listener);
...

但是在迭代所有类型的循环中执行此操作会更优雅，例如

for (var i = 0; i < EventTypeList.length; i++) {
    addEventListener(EventTypeList[i], listener);
}

是否有一个包含事件类型名称常量的List？我还没在网上找到类似的东西。

Answer 1

你可能想试试jQuery来帮助你。虽然它可以在标准的javascript中完成，但jQuery包中包含了很好且易于使用的功能。

在jQuery中它看起来像这样

 $(".listenForMouse").bind("click dblclick hover", function(event) {

 });

可以在http://api.jquery.com/category/events/mouse-events/

找到不同鼠标事件的列表

Answer 2

鼠标事件没有内置列表，但有一个solid list of events on MDN。你可以做三件事：

您可以编写一个函数来迭代这些事件的数组
您可以像Bob Tate先生所建议的那样使用jQuery
你可以扩展addEventListener函数来做类似第一个选项的事情：

EventTarget.prototype.addEventListener = (function(_super) { return function (events, callback) { if (typeof events === "string") { _super.call(this, events, callback); } else if (Object.prototype.toString.call( arguments[0] ) === '[object Array]') { for (var i = 0; i < events.length; i++) { _super.call(this, events[i], callback); } } } })(EventTarget.prototype.addEventListener);

这样你可以这样做：

var mouseEvents =
    ['click',
     'mouseenter',
     'mousedown',
     'mouseleave',
     'mousedown',
     'mousemove',
     'mouseout',
     'mouseover',
     'mouseout',
     'mouseup',
     'show',
     'contextmenu',
     'dblclick'];

someElement.addEventListener(mouseEvents, function () {
  display.textContent = "mouse events: " + ++eventCounter;
})

Here's a pen如果你想搞砸它。

是否存在包含所有MouseEvent-Types的枚举？

2 个答案: