複数タグのイベントハンドラ
解決済
回答 3
投稿
- 評価
- クリップ 2
- VIEW 2,628
前提・実現したいこと
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
複数のinputタグにonmouseoverでスタイルを変える方法
http://start-now.link/100/archives/2277
の用な感じで、cssのclass指定でclass名:hoverのスタイルを設定してあげる。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+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
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
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";
}
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/06 02:05
ありがとうございます。