我有一个简单的场景，我首先像这样绑定(bind) javascript 事件监听器:
(function () {
/*Loading widget initialization code on window load*/
if (window.addEventListener) {// W3C standard
window.addEventListener('load', initWidget, false);
} else if (window.attachEvent) {// Microsoft
window.attachEvent('onload', initWidget);
}
})();
请不要介意 initWidget，因为它已定义并且可以工作 我只是没有将代码放在这里，因为不需要它。
所以这些事件工作正常，但是当我在其中添加一些 jquery 事件处理程序时，jquery 事件不起作用。我在 $.ready() 中添加 jQuery 事件，如下所示:
$().ready(function() {
$("#header").mouseover(function() {
$("#header").css("background-color", "red");
}).mouseout(function() {
$("#header").css("background-color", "transparent");
});
})
jQuery mouseover 和 mouseout 不起作用，除非我删除 window.addEventListener 代码块。 js 事件以某种方式导致与 jQuery 发生冲突，并且控制台中没有任何内容。
我也在这里放了一个 fiddle :https://jsfiddle.net/kzmvaysq/复制确切的问题。我需要一种方法，使事件监听器不会与 jQuery 冲突。
更新
我追踪到主要问题区域，似乎是在尝试更改 initWidget 中 body 标记的 innerHTML。如果你现在看到 fiddle :https://jsfiddle.net/kzmvaysq/4/它可能会帮助您更好地理解问题。
最佳答案
问题是 document.getElementsByTagName("body")[0].innerHTML += mainButtons; 将当前的 dom 结构替换为新的，这将导致丢失所有事件/通过 jQuery 附加到每个元素的数据。
一个简单的解决方案是附加一个新的 div 元素，而不是使用 innerHTML 添加新内容
function initWidget() {
var div = document.createElement('div');
div.innerHTML = 'Somehtml';
document.getElementsByTagName("body")[0].appendChild(div);
}
演示:Fiddle
关于javascript - window.addEventListener 与 jQuery 事件处理程序冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31041369/