javascript - Jquery触发器一次只对addEventListener指定的一个事件起作用

Question

我正在构建一个不依赖 Jquery 的库，以提高我的 javascript 知识。然而，在为库编写测试时，我使用了一些 Jquery 方法。

我有一个测试，可以使用 Jquery 的 .trigger 方法触发使用 native EventTarget.addEventListener 方法添加的事件监听器。

var elem = document.getElementById('square');
elem.addEventListener('click', function () {
    alert('click');
});
elem.addEventListener('mouseover', function () {
   alert('mouseover');
});
$(elem).trigger('click');
$(elem).trigger('mouseover');

当我在同一元素上触发两个不同的事件时，只会触发一个处理程序。

这可以在 JSFiddle 中观察到

有人可以解释为什么会发生这种情况以及如何解决它吗？

Answer 1

如果您使用addEventListener，则无法使用jQuery的trigger方法。 (正如您所注意到的，它适用于某些事件，例如click，但不适用于所有人，例如mouseover)。 this question 中也对此进行了解释.

你有两个选择。您可以像这样使用 jQuery 的 on 事件:

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

或者另一种是不使用jQuery来触发事件。您可以查看this question来做到这一点。