複数タグのイベントハンドラ

Question

###前提・実現したいこと
WEBデザインを勉強中のものです。
複数のinputタグにonmouseoverでスタイルを変える方法がわかりません。inputタグのonmouseover属性に関数を書くのではなくwindow.onloadで実行したいんですが・・・
下記のソースコードのイメージでできませんか？

###該当のソースコード

	window.onload = function(){
		var txtbx;
		var num;
		var i;
		txtbx = document.getElementsByTagName("input");
		num = txtbx.length;
		for(i = 0;i < num;i++){
			txtbx[i].onmouseover = function(){
      //ここに書くべき処理がわかりません
           //下のソースではもちろん動きませんがイメージとしてはこのような感じです
      //txtbx[i].style.border= "1px solid #000";
			};
		}
	}

Answer 1

onmouseover に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、addEventListener を使ったほうが良いような。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/

.mouseover { border: 1px solid #000; };

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-の違い

【element.classList - Web API インターフェイス | MDN】
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

【Event.currentTarget - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget

---

ちなみに i をイベントに渡したいときは下記のようにするとできます。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/1/

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

【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/immediate-function/

---

いっそこうも書ける。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/3/

[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
	ele.addEventListener( 'mouseenter', function( e ) {
		e.currentTarget.classList.add( 'mouseover' );
		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

【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496

Comments

[退会済みユーザー]

最後の例は
txtbx[ i ].addEventListener( 'mouseenter', function(int, e ) {
e.currentTarget.classList.add( 'mouseover' );
e.currentTarget.id = 'id' + int;
}.bind(this,i), false );
って書き方もできそうですね。thisはwindowオブジェクトになっちゃいますが。

[kei344]

ああ、その発想は無かったです。ずっと即時関数でこなしてきたので。さっと見てみましたが .bind() 面白いですね。

> thisはwindowオブジェクトになっちゃいますが。
thisは渡してしまえば良いのでは？
txtbx[ i ].addEventListener( 'mouseenter', function( int, e ) {
e.currentTarget.classList.add( 'mouseover' );
e.currentTarget.id = 'id' + int;
}.bind( txtbx[ i ], i ), false );

https://jsfiddle.net/dp5kc1t2/2/

[kei344]

> 最後の例は
すいません、ちょっと追記してしまったので「2番目の例」となりました。

[退会済みユーザー]

＞thisは渡してしまえば良いのでは？
はい。その通りですね。
解ってはいたのですが,そう書くとbind使うまでもなくtxtdx[i]がthisでアクセスできてしまうのでindex i を持ち込む意味合いが微妙になるかなと思って,そういう表現になってしまいましたw
txtdxを渡して,bindしたiをつかってtxtdx[i]でアクセスするのが良いかなと思いつつも恐らく質問者様がbindを初めて見る書き方だと思ったので,一番基本的な使い方で,一応こう書くとwindow objectが参照できるようになりますという注釈のつもりでした。
kei344様のご参考にもなったのであれば何よりです。

[think49]

i を束縛するなら handleEvent を使うとクロージャを使わずに済みます。
ele.addEventListener('mouseenter', {handleEvent: handleMouseenter, i: i}, false);

this は呼び出し方によって変動するので個人的には信用してません…。
ちなみに、this === window になるのは sloppy mode で Strict Mode なら this === undefined ですね。

[退会済みユーザー]

think49様

ele.addEventListener('mouseenter', {handleEvent: handleMouseenter, i: i}, false);

これすごいですね。, i: iなくても動いたのですが,入れると,スコープが{handleEvent: handleMouseenter, i: i}だけに変わるってことですか？

[think49]

To: tkow さん
下記コードと等価と認識して問題ないかと。
(特に prototype 上のメソッドを渡すときに便利です。)
ele.addEventListener('mouseenter', handleMouseenter.bind({handleEvent: handleMouseenter, i: i}), false);

[退会済みユーザー]

think49様
なるほど！勉強になりました！
ありがとうございます！

Answer 2

複数のinputタグにonmouseoverでスタイルを変える方法

http://start-now.link/100/archives/2277
の用な感じで、cssのclass指定でclass名:hoverのスタイルを設定してあげる。

Comments

[dady]

なるほど、こちらの方がはるかに簡単ですね。
ありがとうございます。

Answer 3

その書き方でほとんど合っていますが,イベントを引き起こしたDOMにアクセスする場合は,thisを使います。
以下のコードで治らなければどこか指定が間違っているだけだと思うので,こちらも参考にしてみてください。

var txtbx = document.getElementsByTagName("input");
var length = txtbx.length;
 for(var i = 0; i<length;i++){ 
  txtbx[i].onmouseover = function(event){
  this.style.border= "1px solid #000";
 }
}

Comments

[dady]

ありがとうございます。thisですね。なんか視野が狭くなっていたようです。
txtbxもiも関数の外にあるので、参照できないのでthisを使うという認識で間違いないですか？

[退会済みユーザー]

いえ実は,txtbxもonmouseoverもiも同じwindow.onloadの関数スコープの中にあるのでアクセスはできます。
ただし,dady様のコードは,onmouseoverイベントが発生するタイミングよりも先に,forループが終了し,iはlength+1の値になったまま,保持され,onmouseoverイベント発生時に,txtbx[length+1]にアクセスしようとしてエラーになってしまいます。
なので,実は,
txtbx[i].onmouseover = function(event){
for(var j =0;j<length;j++){
txtbx[j].style.border= "1px solid #000";
}
}
と書いても動きます。この時,jではなくiを使ってしまうと今回の場合はバグが出ませんが,広域のiの値を上書きしてしまう書き方になっているのでやめたほうがいいと思います。
またこの場合は,一つのマウスオーバーイベントで全ての同じタイプのDOMオブジェクトに影響を与えてしまいます。
thisはイベントハンドラ内で使用すると,indexを指定しなくともイベントを引き起こしたDOMオブジェクトを参照することができるのでそちらを採用しました。イベントを起こしたDOMがindexの何番目かを保持する方法はかなりトリッキーな実装になるのでやらないほうがいいでしょう。

[think49]

この方法ではinput要素ノードの数だけ関数オブジェクトが生成されるので onmouseover イベントハンドラ関数を関数宣言して参照を保持しておくといいかもしれません。

[退会済みユーザー]

パフォーマンス重視なら関数オブジェクトへの参照をキャッシュすべきですね。

[think49]

関数生成コスト問題は、どちらかといえば、パフォーマンスよりもメモリ使用量が重要だと思います。
極端な話、100個のinput要素が存在すれば100倍のメモリを消費することになります。
(付随してイベント定義時の処理時間も延びますが、イベント発火時の処理速度には影響しません。)
親要素でmouseoverイベントを定義してevent.targetで処理分けすれば、イベント定義が一つで済むので更にメモリ消費量を削減することが出来ます。ついでに動的に生成されるinput要素ノードにも対応出来ます。