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

Question

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

解決済

回答 3

投稿 2016/05/06 01:07

評価
クリップ 2
VIEW 1,944

dady

score 16

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 3 件

評価が高い順
新着順
古い順

+1

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

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

投稿 2016/05/06 01:46

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/05/06 02:05

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

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

キャンセル

+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

投稿 2016/05/06 03:18

編集 2016/05/06 04:27

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/05/06 03:53

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

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

キャンセル
2016/05/06 04:13 編集

ああ、その発想は無かったです。ずっと即時関数でこなしてきたので。さっと見てみましたが .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/

ああ、その発想は無かったです。ずっと即時関数でこなしてきたので。さっと見てみましたが .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/

キャンセル
2016/05/06 04:29

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

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

キャンセル
2016/05/06 07:51

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

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

キャンセル
2016/05/06 07:59 編集

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

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

i を束縛するなら handleEvent を使うとクロージャを使わずに済みます。 ele.addEventListener('mouseenter', {handleEvent: handleMouseenter, i: i}, false); this は呼び出し方によって変動するので個人的には信用してません…。ちなみに、this === window になるのは sloppy mode で Strict Mode なら this === undefined ですね。

キャンセル
2016/05/06 08:30

think49様

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

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

think49様 ele.addEventListener('mouseenter', {handleEvent: handleMouseenter, i: i}, false); これすごいですね。, i: iなくても動いたのですが,入れると,スコープが{handleEvent: handleMouseenter, i: i}だけに変わるってことですか？

キャンセル
2016/05/06 08:41 編集

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

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

キャンセル
2016/05/06 09:10

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

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

キャンセル

同じタグがついた質問を見る

JavaScript

score 0 · Accepted Answer · 2016-05-06T02:02

ベストアンサー

0

その書き方でほとんど合っていますが,イベントを引き起こした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";
 }
}

投稿 2016/05/06 02:02

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/05/06 02:14

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

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

キャンセル
2016/05/06 02:25 編集

いえ実は,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の何番目かを保持する方法はかなりトリッキーな実装になるのでやらないほうがいいでしょう。

いえ実は,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の何番目かを保持する方法はかなりトリッキーな実装になるのでやらないほうがいいでしょう。

キャンセル
2016/05/06 07:54

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

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

キャンセル
2016/05/06 08:31

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

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

キャンセル
2016/05/06 13:58

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

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

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

該当のソースコード

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

該当のソースコード

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン