如何使用JavaScript仅触发img元素触发鼠标悬停事件

Question

我希望仅将鼠标悬停在img元素上时触发mouseover事件。 我用了

document.getElementsByTagName('img').onmouseover=function(e){ }

但它不起作用。 我应该如何实现呢？

Answer 1

我认为您应该将事件侦听器一一应用于元素：

 const imgs = document.getElementsByTagName('img'); const map = fn => x => Array.prototype.map.call(x, fn); map(img => { img.addEventListener('mouseover', (e) => { e.target.style.border = '1px solid red'; }); img.addEventListener('mouseleave', (e) => { e.target.style.border = 'none'; }); })(imgs) 

 <img src="" width="100" height="100"> <img src="" width="100" height="100"> <img src="" width="100" height="100"> 

在这里，我们从Array.prototype提取map函数，因此我们可以将函数映射到任何可迭代对象上，而不仅仅是数组。

具有常规ES5语法的相同代码：

 const imgs = document.getElementsByTagName('img'); const map = function(fn) { return function(x) { Array.prototype.map.call(x, fn); } } const sponge = 'http://vignette3.wikia.nocookie.net/spongebob/images/6/6f/SpongeBob_%286%29.png/revision/latest?cb=20140824163929'; map(function(img) { img.addEventListener('mouseover', function(e) { e.target.src = sponge; }); img.addEventListener('mouseleave', function(e) { e.target.src = ''; }); })(imgs) 

 <img src="" width="90" height="80"> <img src="" width="90" height="80"> <img src="" width="90" height="80"> 

Answer 2

getElementsByTagName返回元素的实时HTMLCollection 。 您需要在所有元素上而不是在集合上设置事件。

您可以这样做：

var arrElem = document.getElementsByTagName('img');

for (var i = arrElem.length; i-- ;) {
  arrElem[i].onmouseover = function(e) {};
}

Answer 3

GetElementsByTagName返回元素的Collection。 如果只有一个img ，它将是一个元素的集合。 因此，您需要通过[0]访问此集合的属性。

document.getElementsByTagName('img')[0].onmouseover=function(e){ }

Answer 4

这些都可以做什么吗？ 您将需要JQuery ，但是无论如何我还是会推荐它。

$('#img')
    .mousemove(function (event) {
        console.log('Mouse moved');
    })
    .mouseenter(function () {
        console.log('Mouse over');
    })