Programming主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。ブログを移転しました。Tecuration.comこのサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。この広告は、90日以上更新していないブログに表示しています。2013-04-24JavaScriptのイベントハンドラをまとめてみたJavascript動的なJavaScriptの実行を可能とするイベントハンドラについて学んだことをまとめておく。イベントハンドラとは通常JavaScriptはWEBサイト(HTMLファイル)の読み込み時に実行されるが、ボタンをクリックする、テキストフォームを選択するなどイベントが発生したときにJavaScriptの実行を実現するのがイベントハンドラだ。実用的な使い方としては、入力画面を選択したらフチの色が変わる、フォーム画面でsubmitボタンを押した後、未入力や文字チェックをするなど。イベントハンドラはHTMLのタグ内の以下の^^^部分に記述する。ダブルクォーテーションで囲まれた部分はJavaScriptとして扱われる。そこで処理を完結させてもいいし、functionを呼び出すこともできる。};</script>1も2も同じ処理である。ボタンをクリックするというイベントを発生させると、"Hi"というポップアップウィンドウが表示される。このイベントを制御するハンドラは結構たくさんあり、その中でもこれは使えそうというものについて使い方を書いておく。可能な限りサンプルコードのDemoをのせるようにした。onFocusフォーム要素などにフォーカスが当たるとonFocusが、フォーカスが外れるとonBlurが実行される。:onChangeフォーム要素などの入力内容、選択が変更されると実行される。onResetフォームを送信するとonSubmitが、リセットするとonResetが実行される。:WindowsMaconLoadWEBページの読み込みが完了すると実行される。これは何も知らずブログを訪れた人がびっくりするので、Demoはなし。onDblClickonClickは要素をクリックすると、onDblClickはダブルクリックするとJSが実行される。onKeyDownキーを押すとonKeyDownが、押したキーをあげるとonKeyUpが実行される。onMouseOver要素へマウスが乗るとonMouseOverが、要素から外れるとonMouseOverが実行される。onMouseDown要素をクリックするとonMouseDownが、押したクリックをあげるとonMouseUpが事項される。:MouseUpMouseDownかなり色々なイベントが制御できるので組み合わせるとかなり面白い。イベントハンドラを使う人は参考にどうぞ。編集後記:はてなブログってJS実行できるんだなーと感動。Demoとか簡単に書けるじゃん。縦にやたら長いフォーム画面っていまだによくある。前回イベントハンドラについて書いた。»プロフィールid:akiok_jp主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。月別アーカイブPRはてなブログをはじめよう!akiok_jpさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。