Question

我正在开发一个不依赖于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();，但它不会导致我的事件处理程序被调用。

Answer 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);

Answer 2

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

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

本机是等效的，但是如果查询实际找到元素的元素，您可能需要先检查。你准备好dom时是否正在初始化QUnit测试？

此外，对于attachEvent（IE），您需要使用'on'为事件添加前缀。

tab.attachEvent('onclick', listenerFn);

PS。实际上我认为IE等价物的缺失前缀'on'是问题所在。更改它并测试$（）。再次点击（）。

如何从QUnit测试中触发本机Javascript事件？

2 个答案: