• ベストアンサー

HTMLに書き込むことなく、イベントを制御する方法

よく、HTMLに <img src="yyy.gif" onMouseover="this.src='xxx.gif'"> というふうにイベントハンドラを設定するのを見かけますが、 <script>タグ内で document.onclick = 関数名; となっているのもあります。 後者の方が、スマートのような気がするのですが、その書き方とか、仕様をしっかり理解できてないようなので質問します おそらく、これに限らず基礎的なことだと思います 1、 document.onclick = の後に指定できるのは、関数名の他に何があってどう書くのか? 2、 document.onclick = funcEx(); としないで document.onclick = funcEx; とするのはなぜか? 引数は設定できないのか? 3、 <script>内から、指定した要素のイベントを制御する方法がほかにあれば 教えてください 以上、どれかひとつでも、複数でもいいので、回答もらえるとありがたいです

noname#12205
noname#12205

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

1) XXXX.onclick=function(){…} というように名前のない関数(イベントだけで使われるので、特に名前が必要ない)が書けます。(関数リテラルといいます) 2) 関数オブジェクトにカッコを付けると関数呼び出しになります。 引数は関数定義の方で設定しておきます。 イベントハンドラへの登録なので、この時には引数を設定する意味はありません。 イベントで呼び出される関数に引数が必要かどうかは、ブラウザによっても違います。ネットスケープ系だとイベントを引数で受けて、例えば押されたキーなどを取得することができます。IEでは、イベントは、イベントハンドラないでwindow.eventを使用するので、引数では受けません (ポインタといっていいかどうかは微妙ですが、javascriptではポインタ型のタイプはありません、関数オブジェクトです) 3)IEの場合 <SCRIPT FOR="test" EVENT="onmouseover" type="text/javascript"> window.event.srcElement.style.fontWeight="bold"; </SCRIPT> <SCRIPT FOR="test" EVENT="onmouseout" type="text/javascript"> window.event.srcElement.style.fontWeight="normal"; </SCRIPT> <a href="#" ID="test">test</a> のように、IDで指定したモノのイベントの種類を指定してスクリプトを設定することができます。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

参考URLの「イベントハンドラをHTMLから分離する」の各記事が参考になるかと思います。 他は参考URLにあると思うので2についてだけ。 document.onclick = funcEx(); これでは、この行を実行するときにfuncExを呼び出して実行し、その返値をonclickに代入する命令になってしまいます。 document.onclick = funcEx; ()を省略する事で関数へのポインタを表します。これをonclickに代入します。

参考URL:
http://allabout.co.jp/career/javascript/library/mlibrary6.htm
noname#12205
質問者

お礼

なるほど ありがとうございます

関連するQ&A

  • HTMLページ内のタグに対してのイベント

    HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分(画像やリンク)をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head>   <title></title>   <script type="text/javascript">    window.onload = function ini(){     document.getElementsByTagName("img").onClick = alert("これは画像です");    }   </script> </head> <body>  <img src="..." />  <img src="..." />  <img src="..." />  <img src="..." /> </body> </html>

  • イベントハンドラの関数の引数について

    こんにちは。 Object.onmouseoverのイベントハンドラにObject.classNameとeventを引数とする関数(func1)を指定するにはどのような風にしたら良いでしょうか?以下のように 試しましたがいずれも動きません。 function func1(obj,event){・・・} (1)Object.onmouseover=function(){func1(Object.className,event)} //エラー:Object.classNameはNull (2)Object.onmouseover=function(Object.className,event){func1(Object.className,event)} //無反応 (3)Object.onmouseover="func1("+Object.className+",event)"; //onmouseoverでない時にfunc1が呼び出される。 よろしくお願いいたします。

  • " と ' のために外部ファイルの読み込みに失敗

    <a href="xxx.html" onMouseOut="AA()" onMouseOver="BB('Image1','','yyy.jpg',1)"><img src="zzz.jpg" name="Image1"></a> このようなソースを作って、外部ファイルとしました。 読み込むためにdocument.write('')を使って document.write('<a href="xxx.html" onMouseOut="AA()" onMouseOver="BB('Image1','','yyy.jpg',1)"><img src="zzz.jpg" name="Image1"></a>'); このようにしたのですが、表示されません。 BBの中の引数の’が原因だということは分かるのですが、解決方法がわかりません。 分かる方、いらっしゃいましたらお教えください。 よろしくお願いします。

  • javascriptのマウスイベントに関して質問です。

    javascriptのマウスイベントに関して質問です。 マウスが画像の上に乗ったら画像を切り替え、画像から離したら元の画像に戻すような プログラムを作りたいのですが、うまくいきません。 マウスをもっていっても画像が切り替わりません。 プログラムは以下のように作りました。 どこが間違っているのかまったくわかりません。 よろしくお願いします。 <html> <head> <title>画像切り替え</title> <script type="text/javascript"> <!-- function changeillustsikaku() { document.gazoukirikae.src="./sikaku.gif"; } function changeillustmaru() { document.gazoukirikae.src="./maru.gif; } //--> </script> </head> <body> <h2>画像切り替え</h2> <div> <img src="./sikaku.gif" name="gazoukirikae" alt="四角" onMouseOver="changeillustmaru()" onMouseOut="changeillustsikaku()"> </div> </body> </html>

  • エラーが出ます。

    マウスイベントのjavascriptでエラーが出ます。 <IMG height=13 src="img/new.gif" align=middle name=ar01> <A onmouseover="chImg(document.ar01,'img/icon.gif')" onclick="chImg(document.ar01, 'img/arrow_f.gif')" href="main.html" TARGET="main">ABC</A> というイベントを設定したのですが、 <SCRIPT language=javaScript> <!-- preImg = new Image(); preImg.src="img/arrow_f.gif"; preImg.src="img/new.gif"; preImg.src="img/icon.gif"; function chImg(img_a,img_b) {img_a.src = img_b;} //--> </SCRIPT> のfunction ------の行で 'undefined'は'Null'またはオブジェクトではありません。 というエラーメッセージがでます。 なぜエラーになるのでしょうか? 他のサイトではうまく動いているのに良くわかりません ご指導お願いします。

  • IE5でonmouseoverがうまく行きません。

    画像にマウスが触れた時にその画像を 替えたいのですが,NNではうまく行き, IE5では画像は変化せずうまく行きません。 IE5は次のエラーメッセージがでます。 ページでエラーが発生しました。 -> オブジェクトを指定してください。 よろしくお願いします。 <HTML><HEAD><title></title> <script language="javascript"> <!--- img = new Array(); for (i = 0; i <= 1; i++) {  imag[i] = new Image() ;  imag[i].src = "on_" + i + ".gif"; } function On(n) {   document.images['menu'+n].src = imag[n].src; } function Off(n) {   document.images['menu'+n].src = "off_" + n + ".gif"; } //---> </script></head> <BODY> <a href="xxx.html" TARGET="MAIN" onMouseOver="On(0)" onMouseOut="Off(0)"> <img src="off_0.gif" name="menu0" border="0"></a> <a href="yyy.html" TARGET="MAIN" onMouseOver="On(1)" onMouseOut="Off(1)"> <img src="off_1.gif" name="menu1" border="0"></a> </BODY></HTML>

  • JavaScriptのイベントハンドラ設定の方法

    要素(aタグなど)にイベントハンドラを設定する場合、 直接onclick等を書かずにaddEventListenerで追加するのが良いと聞きました。 しかしIEでは使えず、attachEventで設定する必要があります。 htmlとJavaScriptを分離するという意味では理解できるのですが、 http://java-script.seesaa.net/category/2504769-1.html の用に document.getElementById("hoge").onclick = function("hogehoge"); とする方が楽なんじゃないでしょうか? IEでもFirefoxでも動くので、addEventListenerの用にブラウザ毎に書く必要もありません。 前者を使うメリットは何なのでしょうか?

  • オブジェクトとイベントにつきまして

    javascript超初心者です。。 今仮に、スクリプトの中でメソッド、プロパティ、イベントやイベントハンドラの前に、オブジェクトを入れるとします。(たとえば、window.aleart~など) その中でも、イベントやイベントハンドラをスクリプトの中に書くとして、ナビゲーターオブジェクトをその前に書く時、documentなのかwindowなのか、また他のオブジェクトなのか、使い分け方が分かりません。 大変稚拙な質問で申し訳ありませんが、javascriptの先輩方、どういうイベント(イベントハンドラ)の時にwindowで、どういうイベント(イベントハンドラ)の時にdocumentなのか等、ご回答頂けると本当に助かります。 どうぞよろしくお願い致します。

  • 動的にイベントハンドラ生成する際に引数がある関数を作る

    お世話になっています、ご質問があります。 以下の場合 --hogeA.html-- <html> <head> <script type="text/javascript" src="./**/hogeB.js"></script> </head> <body onload="javascript:hoge.init()"> <input type="text" name="hogehoge" value=""> </dody> </html> --hogeB.js-- hoge = { init : function(){ var BodyElement = document.getElementsByTagName('INPUT'); BodyElement.onBlur = this.setOnBlurAction; }, setOnBlurAction : function(value){ ****(省略)**** } } 上記の場合に、onBlurイベントハンドラ関数を生成し、 画面上でonBlurイベント時にsetOnBlurActionを実行させる予定です。 引数のある関数の場合、動的にイベントハンドラ関数を生成する際はBodyElement.onBlur = this.setOnBlurAction; では駄目な気が致しますが、どうすれば良いでしょうか。 どなたかご教授願います。

  • イベントハンドラを完全に外部化にしたい

    イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ~></li> <a href="b.html"><img ~></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です