Question

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

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

但它不起作用。我该如何实现这个目标？

Answer 1

我认为你应该逐个将事件监听器应用于元素：

＆＃13;

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)

＆＃13;

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

＆＃13;

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

使用常规ES5语法的相同代码：

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

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

你可以这样做：

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

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

Answer 3

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

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

Answer 4

这些都可以做你想要的吗？你需要JQuery，但无论如何我都会推荐它。

如何使用javascript仅为img元素触发mouseover事件

4 个答案: