window.addEventListener 与 jQuery 事件处理程序冲突

Question

我有一个简单的场景，我首先像这样绑定 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");
});
})

除非我删除window.addEventListener代码块，否则 jQuery mouseover和mouseout不起作用。 不知何故，js 事件导致与 jQuery 发生冲突，控制台中没有任何内容。

我也在这里提出了一个小提琴： https : //jsfiddle.net/kzmvaysq/复制确切的问题。 我需要一种方法，以便事件侦听器不会与 jQuery 发生冲突。

更新

我追踪到主要问题区域，这似乎是试图更改initWidget中body标签的 innerHTML 。 如果您现在看到小提琴： https : //jsfiddle.net/kzmvaysq/4/它可能会帮助您更好地理解问题。

Answer 1

问题是document.getElementsByTagName("body")[0].innerHTML += mainButtons; 它用新的 dom 结构替换当前的 dom 结构，这将导致丢失 jQuery 附加到每个元素的所有事件/数据。

一个简单的解决方案是追加一个新的 div 元素，而不是使用 innerHTML 来添加新内容

function initWidget() {
    var div = document.createElement('div');
    div.innerHTML = 'Somehtml';
    document.getElementsByTagName("body")[0].appendChild(div);
}

演示：小提琴

Answer 2

我实际上无法说出原因。
但是，我建议您将所有事件切换到 jQuery 以防止冲突。

您可以通过以下方式附加相同的事件：

 $(window).load(initWidget);

它还会减少代码量，因为 jQuery 会为您正确应用事件。

这是基于您的JS Fiddle Demo 。

更新：你为什么认为它有冲突？

这是另一个 JSFiddle ，它对我有用。

更新 2：

这是一个已知问题。 如果更改 JS 元素属性并使用 jQuery 事件，则会导致一些问题。 在这里阅读更多。

您需要选择以下选项之一：

1. 在您更改您的innerHTML后分配事件。 现在它发生在它之前，因为$(document).ready()在$(window).load()之前被触发。

例如，在编辑后将#header事件放置到initWidget 。

2. 使用jQuery.append()函数（对我来说，这是最好的解决方案）。

例如，这种方式：

function initWidget() 
{
    $("body").append("<div>Somehtml</div>");
}

3. 使用事件委托。

看看这段代码：

$(document).ready(function() {
    $(document).on('mouseover', '#header', function() {
        $("#header").css("background-color", "red");
    });
    $(document).on('mouseout', '#header', function() {
        $("#header").css("background-color", "transparent");
    });
});

Here is the [JS Fiddle Demo][5].

Answer 3

我不认为有任何冲突。

当我添加initWidget()函数时，它开始工作。

这是小提琴 - https://jsfiddle.net/51sxLe7f/

更新小提琴 - https://jsfiddle.net/pg40wp43/2/