JavaScript HTML DOMイベント
HTML DOMを使用すると、JavaScriptはHTMLイベントに反応できます。
Mouse Over Me
Click Me
イベントへの対応
JavaScriptは、ユーザーがHTML要素をクリックしたときなど、イベントが発生したときに実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、HTMLイベント属性にJavaScriptコードを追加します。
HTML イベントの例:
- ユーザーがマウスをクリックしたとき
- Webページが読み込まれたとき
- 画像の読み込みが完了したとき
- マウスが要素の上に移動したとき
- 入力フィールドが変更されたとき
- HTMLフォームが送信されたとき
- ユーザーがキーを押すとき
この例では、ユーザーが<h1>要素をクリックすると、その内容が変更されます。
例
この例では、イベントハンドラーから関数が呼び出されます。
例
HTML イベント属性
イベントをHTML要素に割り当てるには、イベント属性を使用できます。
上記の例では、関数displayDateボタンがクリックされたときに実行されます。
HTML DOMを使用してイベントを割り当てる
HTML DOMを使用すると、JavaScriptを使用してHTML 要素にイベントを割り当てることができます。
例
onclick イベントをボタン要素に割り当てます。
上記の例では、displayDateという名前の関数が、id="myBtn"のHTML要素に割り当てられています。
ボタンをクリックすると関数が実行されます。
onloadイベントとonunloadイベント
onloadイベントとonunloadイベントは、ユーザーがページに出入りするときにトリガーされます。
onloadイベントを使用すると、訪問者のブラウザの種類とブラウザのバージョンを確認し、その情報に基づいて適切なバージョンのWebページを読み込むことができます。
onloadイベントとonunloadイベントを使用してCookieを処理できます。
onchangeイベント
onchangeイベントは、多くの場合、入力フィールドの検証と組み合わせて使用されます。
以下は、onchangeの使用方法の例です。のupperCase()関数は、ユーザーが入力フィールドの内容を変更すると呼び出されます。
onmouseoverおよびonmouseoutイベント
onmouseoverイベントとonmouseoutイベントを使用すると、ユーザーがHTML要素の上にマウスを置いたとき、またはHTML要素からマウスを離したときに関数をトリガーできます。
onmousedown、onmouseup、およびonclickイベント
onmousedown、onmouseup、 およびonclickイベントはすべてマウスクリックの一部です。まずマウスボタンがクリックされるとonmousedownイベントがトリガーされ、次にマウスボタンが放されるとonmouseupイベントがトリガーされ、最後にマウスクリックが完了するとonclickイベントがトリガーされます。
その他の例
onmousedownとonmouseupユーザーがマウスボタンを押したときに画像を変更します。
onloadページの読み込みが完了したときにアラートボックスを表示します。
onfocusフォーカスを取得したときに入力フィールドの背景色を変更します。
Mouse Eventsカーソルが要素の上に移動すると、要素の色が変更されます。
HTML DOMイベントオブジェクトリファレンス
すべてのHTML DOMイベントのリストについては、完全なHTML DOMイベントオブジェクトリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。