如何觸發mouseover事件僅適用於使用javascript的img元素

Question

我希望我的鼠標懸停事件僅在我將鼠標懸停在一個img元素上時觸發。我用

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.prototypemap功能，所以我們可以在任何可迭代的映射函數對象，而不僅僅是數組。

相同的代碼與普通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返回元素的集合。如果只有一個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'); 
    })