onmouseover不'；使用javascript在IE上添加img标记时不起作用_Javascript_Internet Explorer_Image_Addeventlistener_Onmouseover

onmouseover不'；使用javascript在IE上添加img标记时不起作用

javascript internet-explorer image

onmouseover不'；使用javascript在IE上添加img标记时不起作用,javascript,internet-explorer,image,addeventlistener,onmouseover,Javascript,Internet Explorer,Image,Addeventlistener,Onmouseover,我需要一些javascript代码来动态地向div添加一个img标记，img标记需要onmouseover和onmouseout处理程序我让它在Firefox上运行。但它在IE上不太管用。在IE上，添加了img标记，但onmouseover和onmouseout处理程序不处于活动状态代码如下： <body> <div id='putImageHere' /> <script type='text/javascript'>

我需要一些javascript代码来动态地向div添加一个img标记，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>


var node=document.getElementById（'putImageHere'）；
var img=document.createElement（'img'）；
img.setAttribute（'src'，'http://sstatic.net/so/img/logo.png');
子节点（img）；
//第一次尝试，可以在Firefox上使用，但不能在IE上使用
setAttribute（'onmouseover'，'alert（'mouseover'）；
setAttribute（'onmouseout'，'alert（'mouseout'））；
//第二次尝试，我原以为可以在IE上使用，但没有
addEventListener（'mouseover'，function（）{alert（'mouseover'）}，false）；
addEventListener（'mouseout'，function（）{alert（'mouseout'）}，false）；

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

不管怎样，为什么不使用jQuery呢？它几乎覆盖了所有的兼容性问题，有一些额外的功能，而且它完全震撼了

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等）。它们隐藏了浏览器的不一致性，所以您不必担心编写上述代码

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

调用（IE有自己的疯狂事件侦听器系统），则可以使用它。但在通常情况下，每个元素只有一个侦听器，因此更容易坚持每个浏览器在某些事情上支持的老式方法，即分配事件处理程序。

的答案显示了在不使用JavaScript库的情况下附加事件侦听器的正确方法（而且是第一个），但我想补充以下几点：

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

只是为了在JavaScript中实现这一点。事件处理回调应该始终作为事件侦听器通过IE附加，对于其他人来说也是如此。

谢谢！使用img.attachEvent在IE上有效。我之所以不能使用jquery是有原因的，但我的理由不适用于阅读本文的99.99%的人，因此我不会深入讨论。+1清楚地解释了为什么

setAttribute

在IE中不起作用