Question

我需要一些动态添加img标签的javascript代码到div，而img标签需要onmouseover和onmouseout处理程序。

我在Firefox上工作。但它对IE不起作用。在IE上，添加了img标记，但是onmouseover和onmouseout处理程序不活动。

以下是代码：

<body>  
    <div id='putImageHere' />  

    <script type='text/javascript'>
        var node = document.getElementById('putImageHere');
        var img = document.createElement('img');
        img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');
        node.appendChild(img);

        // first attempt, which works on Firefox but not IE
        img.setAttribute('onmouseover', "alert('mouseover')");
        img.setAttribute('onmouseout', "alert('mouseout')");

        // second attempt, which I thought would work on IE but doesn't
        img.addEventListener('mouseover', function() { alert('mouseover') }, false);
        img.addEventListener('mouseout', function() { alert('mouseout') }, false);
    </script>  
</body>

Answer 1

if (img.addEventListener) {
    img.addEventListener('mouseover', function() {}, false);
    img.addEventListener('mouseout', function() {}, false);
} else { // IE
    img.attachEvent('onmouseover', function() {});
    img.attachEvent('onmouseout', function() {});
}

研究使用众多流行的javascript库之一（jquery，prototype等）。它们隐藏了浏览器的不一致性，因此您无需担心编写上述代码。

Answer 2

img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');

根本不要在HTMLElement上使用setAttribute。 Internet Explorer中存在错误，与更易读的DOM Level 1 HTML替代方案相比，它没有任何帮助：

img.src= 'http://sstatic.net/so/img/logo.png';

IE上setAttribute的基本问题是，它与普通属性访问的工作方式相同，即使该属性具有与该属性不同的名称或类型。所以这个：

img.setAttribute('onmouseover', "alert('mouseover')");

与说法相同：

img.onmouseover= "alert('mouseover')";

这没有意义：onmouseover属性与所有事件处理程序一样，应该是一个函数，而不是一个字符串。改为分配一个函数：

img.onmouseover= function() {
    alert('mouseover');
};

然后你也摆脱了将代码置于字符串中的令人讨厌的eval风格的做法。万岁！

至于addEventListener，如果你为IE（它有自己的疯狂事件监听系统）添加一个回退attachEvent调用，你可以使用它。但是在通常情况下，每个元素只有一个监听器，因此更容易坚持使用每个浏览器支持的旧学校onsomething - 分配事件处理程序。

Answer 3

原来IE不支持addEventListener方法。您可以查看解决方法here。

无论如何，你为什么不使用jQuery？它几乎覆盖了所有的兼容性问题，有一些额外的东西，它完全是摇滚。

Answer 4

Ob的答案显示了在不使用JavaScript库的情况下附加事件监听器的正确方法（并且是第一个），但我想添加以下内容：

onmouseover / out绝不应作为属性附加。基本上，你经历了不做的所有麻烦

只需在JavaScript中执行此操作即可。事件处理程序回调应该始终作为事件监听器通过attachEvent附加到IE，而addEventListener作为几乎所有其他人附加。

使用javascript在IE上添加img标签时，onmouseover不起作用

4 个答案: