javascriptを使用してimg要素のmouseoverイベントのみをトリガーする方法

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">

ここでは、私たちはどんなのiterable上の機能をマッピングすることができArray.prototypeからmap機能を抽出オブジェクトだけでなく、配列。

定期ES5構文と同じコード：要素のlike`

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の。 1つだけの場合imgは1つの要素を持つコレクションになります。したがって、このコレクションのプロパティには[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'); 
    })