{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 男人必须洒脱 的问题《onmouseover doesn't work when using javascript》','https://www.manongdao.com/q-357656.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I need some javascript code that dynamically adds an img tag to a div, and the img tag needs onmouseover and onmouseout handlers.
I have it working on Firefox. But it doesn't quite work on IE. On IE, the img tag is added, but the onmouseover and onmouseout handlers are not active.
Here's the code:
<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>
look into using one of the many popular javascript libraries (jquery, prototype, etc). they hide browser inconsistencies so you don't need to worry about writing code like above.
Don't use
setAttributeon an HTMLElement, at all. There are bugs in it in Internet Explorer and it doesn't get you anything compared to the more readable DOM Level 1 HTML alternative:The essential problem with
setAttributeon IE is that it works the same as normal property access, even when the property has a different name or type to the attribute. So this:is the same as saying:
which makes no sense: the
onmouseoverproperty is, like all event handlers, supposed to be a function, not a string. Assign a function instead:and then you've also got rid the nasty eval-style practice of putting code inside a string. Hooray!
As for
addEventListener, you can use it if you add a fallbackattachEventcall for IE (which has its own crazy event listener system). But in the common case where you only ever have one listener for each element it is much easier to stick with the old-school supported-by-every-browseronsomething-assigning event handlers.Turns out IE doesn't support the addEventListener method. You can check a workaround here.
Anyway, why don't you use jQuery? It almost overrides all the compatibility issues, has a handful of extras and it totally rocks.
Ob's answer shows the correct method for attaching event listeners without using a JavaScript library (and was first), but I would like to add the following:
onmouseover/out should never be attached as attributes. Basically, you're gone through all the trouble of not doing
just to do it in your JavaScript. Event handlering callbacks should always be attached as event listeners via attachEvent for IE, and addEventListener for pretty much everyone else.