@イベントハンドラとイベント『起動』のページでも書いていますがJavaScriptは読み込みと同時に起動するか何らかのイベントから起動する事がほとんどです。DOM操作として最も多いのはビジターによる何らかのアクションでイベント(動作)を発生させてJavaScriptを動かす方法だと思います。ページを『ペーパー部分と付属効果部分』に分ける事も主流になりつつあります。整理と言う点では良い事ですので、この辺も踏まえてイベントハンドラの使い方を書いておきます。イベントが発生した後のイベントオブジェクトの利用方法も載せておきます。イベントハンドラ使い方は色々あるのであとで書きます。Microsoft(IE)はDOMを先駆けて実装したのと、拡張範囲が物凄く広いのでかなり多いです。全部網羅できませんのでMicrosoftやMozillaのリファレンスなどもチェックしてください。使われるイベントハンドラの一つです。documentやHTMLエレメントからのきっかけ作りとしては一番多いと思います。フォームボタンなどの特殊なエレメントの場合は、ボタンにフォーカスが当たっていてEnterキーでボタンが押された場合もonclickイベントになります。Netscape以外は右クリックの様なマウスのサブボタンには反応せず普通の『クリック』のみに反応しますが、Netscape、FireFoxは右クリックでも反応します。成立せずにonclickは有効になりません。意図的な細かい動作プランを立てる時はこういった『クリックの定義』にも要注意です。JavaScriptと直接関係ないですがアンカー(Aタグ)もこの『クリック』の定義に沿って動きます。『左クリック』に限定する必要があり、右クリックには反応させない一文が必要になります。document及び各エレメントに付けられます。IE以外はwindowにも可能。ondblclick『ダブルクリックされたら実効』あまり使われていないですがIE、Netscape系、どちらもきちんと動作します。シングルクリックならA、ダブルクリックならBという分岐させる使い方は難しく、Aに加えてBも・・・という使い方になってしまいます。私は隠しオマケ遊びなどで使ったりしています。BBSdocument及び各エレメントに付けられます。IE以外はwindowにも可能。並に良く使われていたイベントでした。嘘のリンク先URLを表示させるなどしてリンク先偽装に積極的に使われるようになっていきました。ステータスバーの操作をIEなどがデフォルトでは無効にしている事で使われなくなりました。使えるようになった事です。マウスオーバー、マウスアウトの役目をCSS記述だけでしてくれるので、わざわざJavaScriptで行う必要性がなくなったと言う事です。hoverで画像交換なども背景画像を使ってできますからね。document及び各エレメントに付けられます。IE以外はwindowにも可能。onmouseout『マウスカーソルがエレメントから外れたら実効』マウスオーバーの逆です。onmouseoverを参照。document及び各エレメントに付けられます。IE以外はwindowにも可能。onmousedown『マウスボタン(左・右)が押されたら実効』このマウスダウンはクリックではなく『マウスボタンが押されたら』onmousedownイベントが発生します。定義上クリックと言うのはスローで考えれば『カッ(押す)・チッ(戻す)』の様にボタンが一回ダウンして更にアップした時に『クリック』となります。イベントは発生してくれません。このマウスダウンは押されただけでイベントが発生しますし、右ボタンなどのサブボタンでも有効です。3個目のボタンからは、そのボタンの定義がマウス制御ソフトでどうなってるかで違います。クリックまたは右クリックと同義にしてるのであれば反応すると思います。一般的に『右クリックされたか?』を判断する時はこのイベントを使ってボタン番号を調べていました。いうイベントハンドラで済ませるのが普通です。document及び各エレメントに付けられます。IE以外はwindowにも可能。onmouseup『マウスボタン(左・右)が(押されたあと)戻されたら実効』このマウスアップはマウスが押されて後、リリースされたらイベントが発生します。onclickは既に説明してある通り、ダウンとアップが同じそのエレメント上で発生していないと『クリック』が成立しません。このマウスアップは、押された場所がどこであってもこのイベントが設定されてるエレメントで『リリースされたら』と言う事になります。マウスボタンはマウスダウンと同様右ボタンも有効です。ドラッグの終点や文字列などの選択範囲の終点をきっかけとて処理をする事などに使われる事が多いと思います。document及び各エレメントに付けられます。IE以外はwindowにも可能。onmousemove『マウスが動いたら実効』エレメント上でマウスが動く度にイベントが次々と発生します。あるカーソルのデコレーションなどのオマケに使われています。JavaScriptによるドラッグ&ドロップでリアルタイムにエレメント移動させる時などにも必要です。いつまでもイベントが追いかけてきてしまうような事になりますので、その辺は注意。意図した動きと、意図しない動きのケースを良く考えてイベントを中断させる等の配慮も必要。document及び各エレメントに付けられます。IE以外はwindowにも可能。oncontextmenu『コンテキストメニューが呼ばれたら実行』Windows系では基本的には『右クリックされたら』とほぼ同義になります。これが良く使われているのが、ソース盗用、画像盗用を防ぐ為に右クリック禁止などですね。返すようにすればコンテキストメニューも出ず『何も行わない』と言う事になりますから。ブラウザはメニューからソース表示させる事ができるので何の効果も無いです。そもそもJavaScriptをOFFにしていればJavaScriptによる制御なんて無意味ですから『効果は無いに等しい』と言って良いです。この目的はJavaScriptで作るアプリ的な物で、サブ(詳細)メニューなどを提供する時に使う方が本来の目的に沿っているかもですね。myMenu()関数でレイヤーで裏メニューなどを出したり。document及び各エレメントに付けられます。IE以外はwindowにも可能。onkeydown『キーが押されたら実効』キーボード上のほとんどのキー(一部無効)に対して有効で、キーが押されたらイベントが発生します。ユーザーがマウス入力からキーボード入力に移行した事を把握したりするのに使えます。そのエレメントにつけてもうまく動作しません。IEもNetscape系よりはDIVなどで動いてくれますが微妙な所です。Operaではクリック後もマウスカーソルがそのエレメントに乗ってると、フォーカスが当たってると判断してキーダウンが有効になったりします。個別エレメントにつけるのと思い通りにイベントをキャプチャーしてくれませんので、documentにつけておくのが向いています。ブラウザ画面がアクティブで無い場合(他のソフトがアクティブ等)は、もちろんキーダウンはキャッチされません。document及び各エレメントに付けられます。IE以外はwindowにも可能。onkeyup『キーが(押されて)リリースされたら実効』キーダウンを参照してください。document及び各エレメントに付けられます。IE以外はwindowにも可能。基本はキーダウンと同じです。Shift、Alt、Ctrlキーなどは反応しません。『何でもキーが押されたら・・・』と使うのであればonkeydownの方が良いです。この辺の違いが必要な時に利用すれば良いと思います。document及び各エレメントに付けられます。IE以外はwindowにも可能。onload『ロードが済んだら実行』windowやbody、frame、iframeなどのウィンドウやドキュメント、またIMGなどのメディアのロードが完了したらイベントが発生します。これは以前に比べて非常に使われるようになってきたイベントハンドラです。常用されるようになった理由はDOM時代、XML、XHTML時代になった為と思います。HTMLエレメントを操作する場合は必ず対象エレメントが読み込まれた後か、ドキュメントのロードが済んでからでないと操作できません。そこでロード完了と同時に処理を開始するきっかけとしてのこのonloadが活躍します。(もちろん以前からもHTMLオブジェクトを操作する場合はこの必要はもちろんありました)。XML、XHTMLの利便性が浸透してきて、以前に比べてHTMLファイルを文書として捕らえて、文書ブロックと修飾ブロック(CSSやスクリプト)を分ける考え方が主流になりつつあるからです。オンロードタイミングで文書を動的な文書に整えると言う作業のきっかけとしてよく利用されています。この方法は後述でイベントハンドラの使い方として説明してあります。scriptやlinkタグにも有効(一応)で、javascriptの外部ファイルや、CSSの外部ファイルが読み込みを確かめる時にも使えます。Scriptタグに有効、linkタグのCSSは無効。IEはlinkタグのCSSに有効、Scriptタグに無効。Operaは両方に有効。使うべき場面としてはwindow.openや他のフレーム、iframeなどの別ウィンドウ内のドキュメントの操作の時です。『読み込まれている』と言う前提で操作すべきものではありません。それらの別ウィンドウのドキュメントをJavaScriptの操作などで入れ替えたりした後に操作する場合は、タイムラグも考えて必ずやるべき事があります。』の部分を無視してる事になります。イベントを利用してロードフラグを立てるような事に使います。いうドキュメント等のロード状態を確認できるプロパティがあるのですが、Netscape系では通常のHTMLファイルに対してはありません。Netscape系はきちんと役目を果たしてくれない事があります。オブジェクトにonload処理を付けて『ロード済』のフラグを立てられるようにしておく事が大事です。『読み込みの完了』と言った確認を甘くしてしまえばエラーが出る可能性は高くなりやすいです。実際はウィンドウを閉じる時などに使われます。これもちょっと悪意のある方法に使われやすい為か、Operaでは有効ではないと思います。閉じられたらまた開くを繰り返すようなプログラムを悪意を持って書かれると迷惑ですからね。使えないブラウザがある以上は、別の方法を考える必要もあります。onerror『エラーが発生したら実行』IMGなど他にも付けられるタグは少しあります。特定のオブジェクトに付ける場合はエラーが起きた時の代替処理などにもって行けば良いでしょう。window.onerrorとして使って、起動させた処理でこれを利用します。CGIやPHPが使える環境(別サーバーでも良い)があれば積極的に使っていくべきイベントハンドラです。開発者等でエラーサンプリングの為に期間限定で実装してるケースもあると思います。2にエラーデータが入ります。それに対する対応や、気づかなかった小さなバグに気づく事もできます。JavaScriptで飾り付けしすぎてるページなどではよくエラーが置きます。製作者・管理者は多分気づいてないです。なんてのも良くあります。サーバーでも何度も表示させてキャッシュを持っていたりしてるので、エラーに気づきにくい事も良くあります。迷惑なのはSafariやOperaでこのイベントが取れない事。SafariやOperaを使うマイナーな環境の人の情報こそエラーに役立てたいのに。値が変更されたらイベントが発生します。使われやすいのがselectボックスで選択したら即実行と言うパターンでしょうね。textareaやinputの場合は『内容テキストに変更があったら』と思いがちですが、ちょっとニュアンスが違います。『内容テキストに変更があった事が確定したら』となります。文字を打ち込んだだけではonchangeイベントは発生せず、フォーカスが移動して初めて『確定』となりochangeイベントが発生します。onsubmit『フォームのSubmitボタン(または同等)が押されたら実効』フォームがSubmit(送信実行命令)されたらイベントが発生します。このイベントを受け取った関数はフォームが送られる前に実行されます。関数()"の様に戻り値を要求する事で関数の戻り値(true、false)次第で送信の実行・中断をする事ができます。気をつけなければいけないのが、フォームが手動(または同等)でSubmitされたら発生すると言う点です。様なメソッドによるSubmit実効命令の場合には、このonsubmitは反応しません。メソッドでクリックさせる場合は手動クリックと同等なのでonsubmitは有効です。onreset『フォームがResetされたら(される直前)実効』フォームのリセット(デフォルトに戻す)がされたらイベントが発生します。必要であればリセット直前のフォーム内の値を取る事もできます。私の場合は、フォームの付属処理としてのJavaScriptの変数の初期化を行うような時に使う事が多いです。様にメソッドで実行されても有効なようです。この他にもいっぱいあります。○○系と言うのは、一般的には・・・と言う事です。実際イベントハンドラ自体は色々なエレメントに使えたり、documentにつけてしまって全てを網羅する場合など色々使い方があります。MicrosoftやMozillaのリファレンスをしっかりチェックしてください。そのエレメントでイベントが発生した時にJavaScriptを起動していました。今使ってもまだそれほど問題は無い方法です。onload="">この様に対応するタグに直接書き込んで使います。"実効命令"実効命令部分はJavaScriptの関数を呼んでも良いですし、実行文を書いても良いです。一行にまとめてもなんら問題の無い書き方をしていれば、複数行にわたって書いても問題無しです。onload="">こんな書き方さえも許されます。"関数()"の様に、関数に渡して処理をさせるのが普通です。HTMLの流れとしては、インラインで書き込む事は非推奨になりつつあります。ま、便利ですしブラウザが理解してくれるうちは、個人レベルであれば使っても良いかな?と思います。位置関係や修飾関係のCSS、JavaScriptなどは別にすると言った文書の構造を分けるのが標準となってきてます。なってくるとドキュメント内にインラインでCSSやJavaScriptのイベントハンドラなどを書き辛くなります。タイミングによってはイベントハンドラで呼ばれる関数等が存在しないケースもありえます。JavaScriptが読み込まれてイベントハンドラ部分が読み込まれていても、まだドキュメント自体が完全に読み込まれる前であればJavaScriptのDOM操作でエラーが出る可能性も十分あります。このケースはマウスオーバーイベントなどで起きてるケースを見かけます。いった不確実な要素を排除する為には、全ての読み込みが完了するまではJavaScriptプログラムを起動させないと言うのが一つの手です。言う事で、ページのロードをきっかけにJavaScriptを埋め込んでいく方法です。プログラム中で新たに作ったオブジェクトにイベントハンドラをつける時にも使います。初期セッティングを行うような感じです。言うイベントを無名関数につなげてしまいココでロード後のセットを行います。ま、これ自体が従来のJavaScriptでのwindowへのイベントのセットでもあります。この無名関数が実行される時は既にドキュメントが全て読み込まれていますので、getElementById()などで対象オブジェクトを指定できます。書くのと同じだと思ってください。イベントハンドラがあると同じ指示がぶつかってしまいます。onloadイベントは削除してください。用関数内に書き込んでしまいます。window.onloadイベントで始動させる処理命令や関数を全てこの1箇所にまとめます。複数のプログラムを共存させる場合にはとても重要な事です。ここから自分の目的のオブジェクトにイベントと処理をつける方法。関数名;このような書き方で、イベントハンドラをセットできます。インラインで書くのと難しさは何も変りません。付けないようにしてください。実行と思って良いです。関数名();とすると関数が実行された処理後の戻り値が変数に入ります。関数の処理内容という形で、変数に関数名の関数オブジェクトを割当てた事になります。その全てにイベントつける面倒な時にも楽に使えます。イベントを付けるよりずっと楽です。沢山のサムネイル画像などがある場合も、DIVなどで囲ってIMGタグ配列を抽出してこんな感じで付けちゃいます。関数名で指定された関数内の処理を実行します。HTMLドキュメントエリアはドキュメントとタグのみのすっきりした分離構造になります。この方法は一つ大きな問題が出る場合があります。ロードが完了するまではスクリプトの起動命令が存在しないと言う事にもなります。時間帯によっては非常に重くて画像がなかなかロードされないケースなどがたまにあります。イベントは発生しないと言う事です。イベントが発生しません。』と言う事になります。本画像を入れ込むなどの工夫をした方が良い場合もありえます。自サーバーが軽いのに、他サーバーのデータの遅れで不便になってしまっては無駄ですからね。変数にvar宣言をすると当然ローカル変数になります。なんとなく初期起動だからと言う事でグローバルな印象を持ちがちなので注意です。いった従来の方法で十分間に合う場合はこれで問題ありません。オブジェクトにイベントを付加する方法などが、今後の標準になっていくと思います。『また処理分岐?』っていう迷惑な話もありますが、それは自作関数やミニライブラリなどで吸収させちゃいましょう。自分のページのスクリプトをしっかり把握して自分で書いてる人は従来の書き方でも特に問題ないです。将来的にはメソッドを使う方法に切り替えていく事も薦めます。私としては『絶対』と言う考え方が無いので、必要に応じてリニューアル時等に徐々に変更していきましょうと言うスタンスです。従来の方法もスクリプトの把握度によって絶対駄目とは言いがたいですからね。メソッドの方法またはメソッドと同等のプログラムを付加する必要があります。これはなるべくと言うよりそうすべきという少し強めです。これらのメソッドは同じオブジェクトに同一イベントを追加していける点が従来の方法より優れているからです。プログラムを組む上で自由度、応用度が広がります。記述があると、何処をいじって良いのかわからないレベルの人にとっては困り物でした。先に書いてある同じオブジェクトの同じイベントがメソッドによる物であれば上書きされません。現在は非常に良くできたJavaScriptライブラリなどが色々あって、あれこれ色んな物をつける人が増えています。『上書きをせずに追加をする』という作り方をする必要があり、同時にグローバル変数などもなるべく少なくして1個のオブジェクトにしてしまうか、無名関数化する努力が必要です。イベントが複数追加できてしまうと困るケースもあります。異なる画像のスライドショーを2個付けられても困ります。いう場合はユニークイベントである必要性をきちんと注意書きにして、イベントは追加ではなく上書きして独占してしまった方が良い場合もありえます。他のスクリプトが何になるか?はそのページの管理者しか知りえないので独占できるかどうかも微妙ですが・・・。同一イベントで他の処理と共存できる場合は『追加型』にする事を考えましょう。作られた時期の下位互換などのせいもありますし、今後修正されていくだろうと思います(期待しています)。言う事でメソッドです。メソッドによるイベントハンドラのセット◆attachEvent()(IE、Opera)(Object).attachEvent('eventhandler',funchandle)の様に、オブジェクトにイベントと処理関数をセットします。様にイベントハンドラ名を文字列として指定します。処理を渡す関数名です。})と言う書き方をする事も可能です。false)の様に、オブジェクトにイベントと処理関数、と通常はfalseを渡します。プロパティで参照できる値です。funchandleは処理を委ねる関数名です。false)と言う書き方をする事も可能です。falseに関しては、同じ位置で発生するイベントの優先度変更と思って良いと思います。通常は最も内側(クリックならクリックされたエレメント)の発生要素から順にイベントが発生します。する事で、そのtrueのイベントを優先させる事ができます。}Mozillaでアナウンスされている物です。イベントを付けるオブジェクトです。このメソッドを使う時に毎回こんな記述をするのは非常に面倒です。ブラウザの違いを吸収させてしまう関数を作って常用すれば逆に使いやすくなります。};}}}こんな感じでしょうか。attachEvent()とaddEventListener()の分岐だけで良いのでしょうが、一つ不安な事があってもう一つ余計な物もつけています。従来の記述方法を使って、これらのメソッドと同じ役目をする物です。私はこの数年は最新の情報を追ってなかったので、どのブラウザレベルでどこまで解釈できるのか?どのメソッドがどの時点で提供されてきたのか?がはっきりわかりません。使えるケースがあると言う想定で、一応下位互換としてつけてあります。)の様に関数として呼んで使います。引数についてオブジェクトはイベントを付けるオブジェクトなのでwindowやdocument、getElementById(id)で取ったオブジェクトなどをそのまま渡します。イベントタイプはevent.typeでとれる値。mouseover)です。処理関数は別にある関数の名前(ハンドラー)でも、無名関数function(){}をそのまま渡しても大丈夫です。Netscape系のaddEventListener()で使う、3つ目の引数(arguments[2])です。addEv()でイベントを追加可能です。同じオブジェクトに同じイベントが追加される場合は、同じイベントで複数の処理が実行される事になります。addEventListener()は実行されてイベントが追加された順に正しく順序良く処理を行います。attachEvent()はイベントが追加された順ではなく、別の何らかのルールで順番が決められるようです。方で処理させた方が良い事になります。(IEで順番を決める方法があるかもしれません。^^;)でも・・・この自作関数の方で行うと、別問題がまた生じます(^^ゞメソッドを使う場合はそのあとでどういう形でイベントを追加されても、イベントは上書きされずに残ります。'')やタグに書き込む方法を使われると上書きされて消されちゃいます(^^;どんなスクリプトと共存させられるかわからないような配布スクリプトの場合は、実行順序よりも上書きされてしまう危険性のほうに重点を置くべきだと思います。};}}前述のミリライブラリからattachEvent()を削除しました。elseの部分は、既に定義されている同一イベントを取り出して、新たに追加するイベントの前に実行するように組んでいます。同一のイベントがかなり多くなってくると、ただでさえIEは実行速度が一番遅いので、この入れ子構造の関数は微妙に実行時差ができやすくなります。ま、これを使うよりは、Mozillaでアナウンスされてる普通に分岐させる方法が良さそうです^^;。falseを使ってタグの元の動きをキャンセルできます。false;"と書くのは、hrefを無効にする事が既に確定してる場合だけです。falseかtrueを返すように使う物です。falseをすれば同じくタグの元の動きをキャンセルできます。false;をしてもタグの元の動きをキャンセルできません。falseを返すようにしないと実行されてしまうので注意です。preventDefault()ま、他にも回避策はあるかもしれませんが。false;をつけます。falseをしてやります。明確に受け渡す事でタグやイベント本来の動きをキャンセルできます。これでアンカーのhref属性で指定した先にジャンプしなくなります。hrefが有効になってしまうと言う報告があります。これはIE6からIE7にバージョンアップしたケース、サードパーティ製のIEを使う場合などに見られるようです。IEの設定をいじると治りますが・・・。そのままの人も多いですからね。返せばタグ本来の動きをキャンセルできます。false;をすれば普通にアンカーやフォームなど本来の動きキャンセルできます。false;をしてもタグの元の動きをキャンセルできません。false;と書かないと実行されてしまうので注意です。等をつける習慣がありますね。アンカーを使う場合はhref属性を最初からつけなければ良いです。ま、それならSPANを使えば良いのですけどね。cursor、アンダーラインなどの為につけていると思います。hoverは有効です。hoverが効かないんですね(^^ゞなのでclassを付けるかIDを付けて、そのセレクタで指定する必要があります。hoverが有効になってくれません。hoverさせてやった方が良いと言う事になります。hrefが無いとカーソルも下線もなくなりますが、それはCSSの方で指定しておけば一括ですし。為にわざとアンカーを使う事は未だに多いのがちょっと不思議。ま、href="javascript:コード"の様に使うのであれば便利と言えば便利ですが、、、。SPANタグかAタグにしてCSS設定を併用して行った方が良いかと思います。hoverを有効にする方法があります。hoverを付けてやります。hoverが普通に有効になります。あたりを使えば良いかと。JavaScriptの起動のために何処まで必要なのか?を考えると扶養の部類だと思います氏。付けていると言う人もいるでしょう。href値に何も実行しないJavaScriptを入れるのが良いでしょう。SPANタグとCSS設定などに変更していくのも良いかと。onclickは使わずにhref="javascript:関数()"にできるケースなら問題は解決です。JavaScriptが有効な人は関数で処理して別のアクションをするとします。使わざるを得ないでしょう。false;が効かない一部のIEの場合は面倒です。様に書き換えるか、アトリビュートをデリートしてしまえば良いです。JavaScriptが有効な人にはhrefが不要なのですから、オンロード時点で削除と言う事ですね。">の様に、onclickより先に動作するイベント、onmouseoverやonmousedownを使ってクリックされる直前にhref値を書き換えてしまえば済みます。onclickイベントが起きてからhrefを書き換えるのは手遅れです。href="#"と言うのを使う人が増えてしまったようです。プロパティを調べる方法があります。正確に(こちらのオンロードの意図にそって)動作してくれない事があります。true;}画像が1個の場合は無名関数で良いです。いうプロパティを作りfalseを入れておきます。いうロードフラグを作る事でNetscape系でもしっかりと確認ができます。困るのがHTML画像オブジェクトのロード状況。画像タグにonloadを埋め込むのは全く無意味です。従ってインラインでonloadを書き込むか、画像タグ(オブジェクトを)をwindow.onload後に入れ込む、と言った形になります。ロード確認が重要なケースなら遠回りでもこういう方法をとるしかありません。有効になってくれません。様に記述する必要があるようです。onreadystatechangeが使えますので、この辺を使ってロード確認をする手もあります。インラインで書くのと同じように普通に有効になってくれます。読み込ませてすぐに操作しようとするとエラーが出る可能性は非常に高いです。読み込みが完了したらフレームドキュメントのDOM操作をするように用心深くワンクッション置くようにしてください。'a.html';と指定しただけでは読込みスタートの合図でしかありません。何度も表示してキャッシュがあったりしてエラーに気づきにくくなるケースがあります。ページを訪れる人にはエラーでお出迎えと言うパターンも良く見かけますので気をつけてください。これらの他にもブラウザや使い方による微妙な違いが発生するケースもあります。最低でもIEとFireFoxの2大ブラウザで確認して原因をつきとめて両方で動くようにしてください。どこでイベントが起きたのか?』を知る必要がある場合があります。このイベントオブジェクトのプロパティを参照する事で色々情報をとる事ができます。使われる物をピックアップして紹介しておきます。インラインのthisイベントが埋め込まれているオブジェクトを指します。状況に応じて指す物が変ります。このイベントハンドラの実行内容に書くthisは、このイベントが付けられているオブジェクトを指します。関数側で引数としてこのオブジェクトを受ける事で、対象オブジェクトの特定をわざわざする必要がなくなります。一部thisについて修正しましたthisがイベントが発生したオブジェクトと書いてしまっていました。DIVにonclickがつけられて、そのDIVの中のAタグがクリックされた場合でも、thisはイベントがつけられているDIVを指します。イベントが発生したエレメントは、Aタグのエレメントです。イベントハンドラから関数を呼ぶ時に引数として渡す必要があります。属しているフォームを指します。//これがフォームオブジェクトを指す}の様に引数をオブジェクトとして扱えば良いです。様にそのタグオブジェクトのプロパティ(アトリビュート)を指定したりします。thisイベントの発生したオブジェクトではなく、イベントを埋め込んだオブジェクトを指します。内包するタグが存在しない場合はこれらは両方同じと言えます。cFunc(){alert(this.tagName)}これらの書き方の場合は、イベントハンドラに関数オブジェクトが埋め込まれてると思ってください。無名関数やハンドラで設定されてる関数内では、thisがそのままonclickイベントが埋め込まれてるオブジェクトを指します。この例のcFuncにハンドラで指定するのも無名関数と同じく、thisはcFuncが埋め込まれたオブジェクトを指します。イベントの発生エレメントはは実際にクリックされたタグになりますので、thisがそのままイベント発生オブジェクトを指すケースとは違ってしまいます。srcElement(IE)で取る必要があります。間違えて書いていました。windowを指します。イベントが埋め込まれたオブジェクトを指します。取得イベントが発生するとイベントオブジェクトが作られます。使える情報を持っています。eventオブジェクトの指定?表記?方法なども微妙に違います。eventオブジェクトの持つプロパティも違いますので例を出しながら紹介します。引数として関数に渡す必要があります。受け取る関数側では、そのイベントオブジェクトを受け取る引数を用意して(eventと言う引数名にはしない)、それを受け取る事でイベントオブジェクトを利用できるようになります。してオブジェクトを参照できます。して参照するのは控えてください。IEでもNetscape系でも通用する書き方としては、1つ目の例の引数として渡す方ですので、それを定番としてしまう方が良いです。arguments[0]に勝手にイベントオブジェクトが入ります。従って取り出す時は受け取る為の引数を用意しておいて、その引数にイベントオブジェクトを入れます。引数0に勝手に入るとなると、引数の受け取りの順番などで困りそうですが、この手の方法の場合に引数を受け取る事はまずありません。他の何らかの処理のデータを受け取るのであれば、変数として受け取っておけば良いと思います。window.eventがUndefinedでeが存在するのでeの値(イベントオブジェクト)が変数evtに入ります。これでどちらも変数evtがイベントオブジェクトとして利用できます。e;と書くとNetscape系でeventが理解できずにエラーが出てしまいます。存在しているオブジェクトのプロパティとして調べる場合は、未定義でもUndefinedとなりエラーにはなりません。Netscape系では理解できないがエラーは出ないと言う形になります。IEでは引数eに関しては、引数として設定があるが何も受け取ってないのでundefinedとして処理できます。エラーメッセージとファイル名、ライン名などになるケースもあります。Netscape系ではできなくなります。エラーはオブジェクトよりも、エラーを起こしたJavaScriptのコードに問題があるわけで、それがわかれば良いので特に問題はないとは思いますが。)にイベントオブジェクトが入ります。通常通りwindow.eventでも当然取れます。)にイベントオブジェクトが入ります。する事で、両方ともイベントオブジェクトを引数eとして取れます。})と言うように共通で使えます。eventオブジェクトのプロパティプロパティについては、とほほさんの所や、Microsoft、Mozillaのリファレンスを見てください。使われる物をちょっと書きます。(event).target全部読んでる人は『あれ?』と思うかもしれません。してすぐ特定できるはずですから。これは最下層の個々のオブジェクトにイベントハンドラを付けた(埋め込んだ)場合です。埋め込んだオブジェクト=発生オブジェクトではありません。その範囲の中でどのエレメント(HTMLオブジェクト)から発生したのかを突き止める時に使います。ページ中にボタンが10個あるとします。なるとボディのどこをクリックしてもイベントが発生します。documentの事を指しますので、どこでクリックされたのかもわかりません。eventオブジェクトのこのプロパティを参照します。イベントが発生したオブジェクトが入ります。evtにイベントオブジェクトが入っています。存在するオブジェクトのプロパティを調べるのですからお互い理解できないプロパティ名があってもUndefinedで無視してエラーも出ないです。ボタンが押された場合の実効命令を簡単に記述する事ができてしまいます。クリックイベント(例の場合)を一つの関数の中で色々分岐させたりもできて、管理しやすくなるケースもあります。プログラムの作り方としては『あり』と言う事です。すればサムネイル画像がクリックされた事がわかります。何番目(どの)の画像がクリックされたか、何番目(どの)のボタンがクリックされたか?などがすぐ把握できませんね。クリックされたエレメントから情報を引き出せるようにして利用します。'.jgp';}}el.idでクリックが発生したサムネイルのIDを取得。replaceでthと言う文字を消して数字だけにしてしまう。.jpgと言う文字列を前後に付けて、呼び出す画像名に加工。JavaScriptで使いまわすのがベタですが単純な方法です。『表示枠』つまりブラウザで見える部分内での位置です。