回答編集履歴

3 ミスがあったため修正。

kei344

kei344 score 62456

2016/05/06 04:27  投稿
`onmouseover` に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、`addEventListener` を使ったほうが良いような。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/](https://jsfiddle.net/dp5kc1t2/)
```CSS
.mouseover { border: 1px solid #000; };
```
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', function( e ) {
       e.currentTarget.classList.add( 'mouseover' );
   }, false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
``classList`` がIE10+、`addEventListener` `currentTarget` がIE9+ なのでそろそろ使えるかなという感じです。（当然別の書き方もあります）
【JavaScriptでよく使うDOM操作とか - Qiita】
[http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-と-addeventlistenerclick-の違い](http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-%E3%81%A8-addeventlistenerclick-%E3%81%AE%E9%81%95%E3%81%84)
【element.classList - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/classList](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)
【EventTarget.addEventListener - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
【Event.currentTarget - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget](https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget)
---
ちなみに `i` をイベントに渡したいときは下記のようにするとできます。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/1/](https://jsfiddle.net/dp5kc1t2/1/)
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', ( function( int ) {
       return function( e ) {
           e.currentTarget.classList.add( 'mouseover' );
           e.currentTarget.id = 'id' + int;
       };
   } )( i ), false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
【JavaScriptで即時関数を使う理由 - Qiita】
[http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e](http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)
【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)
---
いっそこうも書ける。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/3/](https://jsfiddle.net/dp5kc1t2/3/)
```JavaScript
[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
   ele.addEventListener( 'mouseenter', function( e ) {
       e.currentTarget.classList.add( 'mouseover' );
       e.currentTarget.id = 'id' + int;
       e.currentTarget.id = 'id' + i;
   }, false );
   ele.addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}); // IE9+
```
【Array.prototype.forEach() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
[http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496](http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496)
2 補足の追加。

kei344

kei344 score 62456

2016/05/06 04:27  投稿
`onmouseover` に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、`addEventListener` を使ったほうが良いような。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/](https://jsfiddle.net/dp5kc1t2/)
```CSS
.mouseover { border: 1px solid #000; };
```
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', function( e ) {
       e.currentTarget.classList.add( 'mouseover' );
   }, false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
``classList`` がIE10+、`addEventListener` `currentTarget` がIE9+ なのでそろそろ使えるかなという感じです。（当然別の書き方もあります）
【JavaScriptでよく使うDOM操作とか - Qiita】
[http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-と-addeventlistenerclick-の違い](http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-%E3%81%A8-addeventlistenerclick-%E3%81%AE%E9%81%95%E3%81%84)
【element.classList - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/classList](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)
【EventTarget.addEventListener - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
【Event.currentTarget - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget](https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget)
---
ちなみに `i` をイベントに渡したいときは下記のようにするとできます。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/1/](https://jsfiddle.net/dp5kc1t2/1/)
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', ( function( int ) {
       return function( e ) {
           e.currentTarget.classList.add( 'mouseover' );
           e.currentTarget.id = 'id' + int;
       };
   } )( i ), false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
【JavaScriptで即時関数を使う理由 - Qiita】
[http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e](http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)
【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)
---
いっそこうも書ける。
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/3/](https://jsfiddle.net/dp5kc1t2/3/)
```JavaScript
[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
   ele.addEventListener( 'mouseenter', function( e ) {
       e.currentTarget.classList.add( 'mouseover' );
       e.currentTarget.id = 'id' + int;
   }, false );
   ele.addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}); // IE9+
```
【Array.prototype.forEach() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
[http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496](http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496)
1 読みやすく修正。

kei344

kei344 score 62456

2016/05/06 03:19  投稿
`onmouseover` に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、`addEventListener` を使ったほうが良いような。
動くサンプル：[https://jsfiddle.net/dp5kc1t2/](https://jsfiddle.net/dp5kc1t2/)
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/](https://jsfiddle.net/dp5kc1t2/)
```CSS
.mouseover { border: 1px solid #000; };
```
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', function( e ) {
       e.currentTarget.classList.add( 'mouseover' );
   }, false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
``classList`` がIE10+、`addEventListener` `currentTarget` がIE9+ なのでそろそろ使えるかなという感じです。（当然別の書き方もあります）
【JavaScriptでよく使うDOM操作とか - Qiita】
[http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-と-addeventlistenerclick-の違い](http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-%E3%81%A8-addeventlistenerclick-%E3%81%AE%E9%81%95%E3%81%84)
【element.classList - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/classList](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)
【EventTarget.addEventListener - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
【Event.currentTarget - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget](https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget)
---
ちなみに `i` をイベントに渡したいときは下記のようにするとできます。
動くサンプル：[https://jsfiddle.net/dp5kc1t2/1/](https://jsfiddle.net/dp5kc1t2/1/)
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/1/](https://jsfiddle.net/dp5kc1t2/1/)
```JavaScript
var txtbx = document.getElementsByTagName( 'input' )
 , i, l = txtbx.length
 ;
for( i = 0; i < l; i++ ){
   txtbx[ i ].addEventListener( 'mouseenter', ( function( int ) {
       return function( e ) {
           e.currentTarget.classList.add( 'mouseover' );
           e.currentTarget.id = 'id' + int;
       };
   } )( i ), false );
   txtbx[ i ].addEventListener( 'mouseleave', function( e ) {
       e.currentTarget.classList.remove( 'mouseover' );
   }, false );
}
```
【JavaScriptで即時関数を使う理由 - Qiita】
[http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e](http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)
【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る