• ベストアンサー

evtとは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>イベント情報の取得</title> </head> <body> <script type="text/javascript"> <!-- // ページのロード時に呼び出される関数initをセット window.onload=init; // ページのロード時に呼び出される関数 function init(){ // onclickイベントハンドラを定義 document.getElementById("txt").onclick=msg; } // onclickイベントハンドラ関数 function msg(evt){ // W3C DOMとIEの両方のイベントオブジェクトに対応 evt = (evt) ? evt : ((event) ? event : null); alert(evt.type+"されました"); } //--> </script> <div id="txt">クリックしてください</div> </body> </html> 上記のコードで【MozillaやOperaなどのブラウザでは、イベントハンドラ関数を設定した場合にも、関数の引数としてイベントオブジェクトが渡される】とのことですが、イベントハンドラ関数msgに渡されているevt【function msg(evt){】はいきなり出て、何を意味しているのかよくわかりません。 このコードを見て推測できる方、アドバイスをお願い致します。

noname#46712
noname#46712

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

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

＞function msg(evt) 説明どおり。MozillaやOperaではイベントに関する各種情報＝イベントオブジェクトを引数として渡してきます、それを受取るべくevtという名前の器（変数）を用意します。もちろん関数内での宣言ですから名前は何でも(evtでなくても)かまいません。 渡されたイベントオブジェクトを参照する事でイベントの種類や発生元（クリックならクリックしたオブジェクト）等々の情報が得られます。 ＞evt = (evt) ? evt : ((event) ? event : null); IEではイベントハンドラの引数は空です。代わりにwindow.eventというグローバルオブジェクトにイベント情報が格納されています。 引数(evt)が得られてなければevtという名前でeventを参照できるようにします。 これでevt.typeでIEでもMozillaでも同じ変数で発生したイベントのタイプ（この例では"click"です）を参照できるようになります。 なお、イベントオブジェクト内のプロパティにも違いがあるので、これだけでブラウザの差異が完全に吸収されるわけではありません。

その他の回答 (1)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

>evt = (evt) ? evt : ((event) ? event : null); これの少し前を参照 >function msg(evt){ ただの変数名 function での構文による括弧内の名前が何であるのか、もう一度文法を確認したら良いんじゃない？ いきなりもなにもfunctionっていきなり出てくるものだし。 少しくらい流れを追おうとしようよ。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • イベントevt?evt.target:event.srcElement;の意味合い

    以下の理解で合っているのでしょうか？ よくイベントの取得で エレメント.onclick = function(evt){ var e = evt?evt.target:event.srcElement; } でeにイベントオブジェクトの発生元要素をセットしているのを見かけますが、 これは、ブラウザーの違いの吸収なのでしょうか？ firefoxでは、イベントハンドラー関数にイベントオブジェクトが渡されるので、渡されたイベントオブジェクトよりevt.targetで発生元要素をセットし、一方IEでは、eventという名前のオブジェクトが存在している（？）ので、イベントハンドラー関数にイベントオブジェクトが渡されず、event.srcElementで発生元要素をセットする。 　※Opera、Safariは何でも良い IEの場合、後から、イベントが追加されたらeventオブジェクトはどうなるのでしょうか？ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか？

  • Ajax.Updaterで読み込んだ先の要素にイベントを設定したい

    Ajaxの勉強をしているのですが、非同期通信で要素を書き換えた後の処理について困っています。 現在、prototype.jsのAjax.Updaterを利用して下記のようなソースを書き、動作の検証を行っているのですが、読み込み元のファイル(test.1html)から読み込んだ先(test2.html)の要素を取得することは出来ても、その要素に対してイベントを設定することが出来ません。 具体的に言うと、 targ2の要素をクリックすると、test2.html内のtarg3の要素を取得出来てアラートが走りますが、targ3の要素をクリックしてもイベントが実行されないという状況です。 このtarg3の要素に対してイベントを設定するにはどのようにすれば良いでしょうか？ ○test1.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> <script src="prototype.js"></script> <script> window.onload=function(){ Event.observe('targ1', 'click', handler1); Event.observe('targ2', 'click', handler2); Event.observe('targ3', 'click', handler3); } function handler1() { var myajax = new Ajax.Updater( 　　　　　{success : "targetString"}, 　　　　　"test2.html", 　　　　　{evalScripts:true}); } function handler2() { alert($('targ3').innerHTML); } function handler3() { alert($('targ3').innerHTML); } </script> </head> <body> <div id="targ1">押して非同期通信開始</div> <div id="targ2">非同期通信終了後に押す</div> <div id="targetString"></div> </body> </html> ○test2.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> </head> <body> <div id="targ3">非同期通信で呼ばれた要素</div> </body> </html>

    • ベストアンサー
    • AJAX
  • javascript関数呼び出し時の()について

    javascript関数呼び出し時に、 a関数があるとき、 a()をつけることで ・戻り値を代入するという意味になるということ ・関数自体を代入していますので、a関数を実行した戻り値を代入する ということを教えて頂きました。 また、()がないとき、aとした場合、 ・関数の登録だけがされる　 ということを教えて頂きました。 (http://okwave.jp/qa/q7383010.html) しかし、以下ソースの場合、onclickには、 関数名pushを[onclick="push"]ではなく、[onclick="push()"]と記述しないと 正しく動作しませんでした。 私的には、 onclickには、「push関数を登録してクリックされたときにだけ動作させる　= push　だけでいいのではないのか？」 と考え、[onclick="push"][onclick="push()"]の二つのボタンを用意したのですが、 push()ボタン　しか　正常に動作しませんでした。 なぜなのでしょうか？ ()なしの、関数の登録だけがされる　という内容を私は間違って捉えてしまっているのでしょうか。 ご教授お願いします。 以下ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function push(){ alert('ボタンが押されました'); } --> </script> <title>簡単実験</title> </head> <body> <h1>関数実験</h1> <hr> <input type="button" value="()ありボタン" onclick="push()"> <input type="button" value="()なしボタン" onclick="push"> </body> </html>

  • BODYタグのonloadについて

    こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか？"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか？」のログは表示されているので、このHTML（JSP）は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか？ 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。

    • ベストアンサー
    • HTML
  • このソースどういう意味ですか【JavaScript】

    <HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="～"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか？ 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。

  • meta要素の意味

    は何でしょうか? <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> を置かない場合の不都合は何でしょうか？ これらをおく意味は何でしょうか?

    • ベストアンサー
    • HTML
  • Ajax ボタンが起動しない

    ボタンを押しても関数が呼び出されなくて困っています。 ソースは以下のとおりです。 回答お願いします。 <html> <head><title>テスト1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var globalVar = "テスト"; function varTest(){ debugClear(); debug(globalVar); } </script> </head> <body> テスト1回目 <form> <input type="button" value="テスト開始" onclick="varTest();"/><br/> </form> </body> </html>

    • ベストアンサー
    • AJAX
  • 環境：WinXP＋IE7＋jquery1.4.2

    環境：WinXP＋IE7＋jquery1.4.2 次のようなコードで、メニューをクリックすると、メニューを非表示にしているのですが、画面が一瞬ちらつきます。ちらつきを無くすには、どうすればよいでしょうか？ よろしくお願いします。 【コード】 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="../ajax/jquery.js"></script> <script language="JavaScript"> <!-- $(document).ready( function(){ $("#menu").click(function(){ $(this).hide(300); }) } ); //--> </script> </head> <body> <div id="menu">メニュー</div> <div id="doc">コンテンツ<br/>○○○○○○○○○○○○○○○<br/></div> </body> </html>

  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<script type="text/javascript">～</script>　をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • 画面（ウィンドウ）／画像の拡大縮小について

    PHP/JavaScript初心者です。 ＰＨＰとＪａｖａＳｃｒｉｐｔと以下のようなことをしてます、 画面（ウィンドウ）上に画像が表示し 「拡大」ボタンを押したら ウィンドウ／画像を拡大して表示 「リセット」ボタンを押したら ウィンドウ／画像を元のサイズに戻してして表示 をしたいのですが、どうすればいいですか？ 関連ありそうな、ソースを以下に書きます。 dspimg.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>文献表示</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- //画面／画像を拡大／縮小 function win_zoom(w,h){ window.resizeTo(w,h) location.reload(); } //--> </script> </head> <body> echo '<img id="dspimg" src="ppp.jpeg" alt="ppp.jpeg" width=600 height=400 " />'; <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="win_zoom(800,700)" > echo '<div align="center">'; <?php //リセット ?> <INPUT type="button" Value="リセット" onclick="win_reset(600,500)" > </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する