jQuery触发addEventListener注册的mousedown事件

Question

我想用jQuery的trigger()方法模拟假的mousedown事件，并且我使用本地JavaScript方法addEventListener()注册mousedown事件。但是我发现它无法触发：

elem.addEventListener('mousedown', function () {
    alert('addEventListener');
});
$(elem).on('mousedown', function () {
    alert('on');
});
$(elem).trigger('mousedown');

在 jsFiddle 中查看示例

我对此进行了一些测试。

1. 使用 jQuery 的 on() 注册 mousedown 事件

• 结果：有效

2. 使用 addEventListener() 注册 click 事件

• 结果：有效

这里有什么问题吗？

P.S. 我之所以使用 addEventListener() 是因为我想编写一个不依赖 jQuery 的库。

- Sam

---

嗨，谢谢你的回答。但我真的不明白。为什么它不起作用？据我所知，jQuery触发器可以执行附加在指定事件上的处理程序。但是这个示例没有。这是jQuery的限制吗？还是我误解了什么？再次感谢。 - Sam

答案可以通过阅读jQuery.trigger的文档轻松找到，其中写道：“使用.on()或其快捷方法之一附加的任何事件处理程序都会被触发”，但没有说明trigger()将触发本地事件！ - adeneo

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events - adeneo

抱歉，由于我是一种自然语言生成的AI模型，无法通过链接获取翻译内容。请将需要翻译的具体文本发送给我，我会尽力提供翻译帮助。 - adeneo

很遗憾，jQuery不支持触发本地事件，因为我们可以使用dispatchEvent来触发本地事件，但实际解决方案（跨浏览器）并不简单，所以最好是jQuery解决这个跨浏览器问题。但是你可以尝试编写自己的插件并重复使用它。 - King King

Answer 1

尝试使用

EventTarget.dispatchEvent

MDN链接

你的代码将类似于：

var elem = document.getElementById('square');
elem.addEventListener('mousedown', function () {
    alert('addEventListener');
});
$(elem).on('mousedown', function () {
    alert('on');
});

elem.dispatchEvent(new Event('mousedown'))

如果您正在考虑IE浏览器，可能需要使用fireEvent。

object.fireEvent(bstrEventName, pvarEventObject, pfCancelled) 

MSDN链接

这就像是...

if (document.createEvent) {
    element.dispatchEvent(event);
} else {
    element.fireEvent("on" + event.eventType, event);
}

- Okky

---

奇怪的是，它没有起作用。这个可以 - https://dev59.com/OnbZa4cB1Zd3GeqPF3S4#18631561 - coding_idiot

Answer 2

jQuery只会触发由自己创建的事件。

甚至顺序也很重要，例如：这个有效。

$(elem).on('mousedown', function () {
    alert('on');
});
$(elem).trigger('mousedown');

但是以下代码将无法工作。

 $(elem).trigger('mousedown');
 $(elem).on('mousedown', function () {
    alert('on');
});

请查看此演示代码：DEMO FIDDLE。

- Maulik Anand

---

但是我尝试使用addEventListener注册点击事件，并通过jQuery trigger（）触发它，它起作用了... - Sam

@Sam，让我检查一下，如果你已经完成了，请给我一个演示链接。 - Maulik Anand

@Sam 看起来 trigger() 只能触发一些有限的事件，例如它可以触发 onclick 事件，但无法触发 onmousedown 事件。 - King King

@MaulikAnand 很有趣，它可以通过赋值而不是addEventListener来触发已注册的事件处理程序。 - King King