如何从 QUnit 测试中触发原生 Javascript 事件？答案

【问题标题】：How can I trigger a native Javascript event from a QUnit test?如何从 QUnit 测试中触发原生 Javascript 事件？
【发布时间】：2011-04-07 14:00:18
【问题描述】：

我正在开发一个不依赖于 jQuery 的 Javascript 库，尽管我的测试中有 jQuery 和 QUnit。在库中，我以 jQuery 的方式将事件附加到元素：

if (document.addEventListener) {
  tab.addEventListener('click', MyModule.show, false);
} else if (document.attachEvent) {
  tab.attachEvent('click', MyModule.show);
}

我尝试在我的 QUnit 测试中调用 $('#tab').click();，但它不会导致我的事件处理程序被调用。

【问题讨论】：

标签： javascript jquery unit-testing qunit

【解决方案1】：

jQuery 有自己的事件注册系统，它与 DOM 的事件注册是分开的。当我们调用$(something).click() 时，所有已注册的jQuery 处理程序和已注册的onclick 处理程序都会触发，但其他都不会。例如，

document.body.addEventListener('click', function() { alert('event') }, false);
document.body.onclick = function() { alert('onclick'); };      

$('body').click(); // alerts "onclick"

如果您调用document.body.onclick()，那么只有第二个事件会触发并提醒“onclick”。要触发这两个事件，请创建一个事件对象并将其分派给有问题的元素 - 在本例中为 body。你可以找到一个例子here。不出所料，IE 使用不同的机制来做同样的事情，你需要调用fireEvent。

这是现代浏览器的非跨浏览器示例（取自上面的 MDC 文章），

var clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent('click', true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);

document.body.dispatchEvent(clickEvent);

【讨论】：

那是......令人发指，但我当然不能责怪信使:)

【解决方案2】：

（不确定）jQuery 在本地事件系统之上使用它自己的事件系统。 $(el).click() 直接在该事件系统上调用，而不是在本机系统上。（/不确定）

document.getElementById('tab').onclick();

是原生等价物，但您可能需要先检查查询元素是否真的找到元素。当 dom 准备好时，您是否正在初始化 QUnit 测试？

此外，对于 attachEvent (IE)，您需要在事件前加上“on”。

tab.attachEvent('onclick', listenerFn);

ps。实际上，我认为 IE 等效项缺少前缀“on”是问题所在。更改它并再次测试 $().click()。

【讨论】：

我在 Chrome 中运行测试，所以我怀疑 IE 特定版本是问题。