ドキュメント : Event

JavaScriptのブラウザイベントとイベントハンドラーを解説します。ブラウザイベントブラウザイベントはブラウザのクリックやキーボード入力などのWEBページで発生するイベントです。JavaScriptはHTML要素のクリックなど様々なイベントを検知することができます。イベントハンドラーイベントハンドラーは特定の条件を満たした場合に実行される処理です。JavaScriptはイベントに応じたイベント

JavaScriptのEventオブジェクトを解説します。EventオブジェクトEventオブジェクトはイベントの情報を表すオブジェクトです。イベントハンドラーのコールバック関数に第１引数として渡されます。<button id="btn">ボタン</button> <script type="text/javascript"> function ou

JavaScriptでブラウザイベントをプログラムから発生させる方法を解説します。イベントの生成Eventオブジェクトのコンストラクタを使ってイベントを生成します。基本構文new Event(イベント種別)サンプル<button id="btn">ボタン</button><script type="text/javascript"> function ou

JavaScriptのブラウザイベントにおけるバブリングと制御を解説します。バブリングイベントは発生した要素から親要素へと伝搬します。このことをJavaScriptではバブリングと呼びます。その様子をサンプルで確認しましょう。<main id="main"> <div id="div"> <button id="button">ボタン<

JavaScriptのclick（ブラウザイベント）を解説します。clickclickは要素がクリックしたときのイベントです。デスクトップパソコンのマウス（カーソル）やスマートフォンのタップでイベントを発生します。サンプルHTML属性onclick属性を設定します。<button id="button" onclick="greeting();">ボタン</button>&

JavaScriptのfocus（ブラウザイベント）を解説します。focusfocusは要素にフォーカスが当たったときのイベントです。サンプルHTML属性onfocus属性を設定します。<input id="input" onfocus="greeting();"><p id="message"></p><script type="text/javascr

JavaScriptのchange（ブラウザイベント）を解説します。changechangeは値の変更が確定したときのイベントです。input要素やtext要素で値を入力し、エンターキー入力やフォーカスを外すと値が確定します。サンプルHTML属性onchange属性を設定します。<input id="input" onchange="valueRender(event);"><p

JavaScriptのinput（ブラウザイベント）を解説します。inputinputは値が変更した時のイベントです。input要素やtext要素で値を入力するごとにイベントが発生します。サンプルHTML属性oninput属性を設定します。<input id="input" oninput="valueRender(event);"><p id="message"><

JavaScriptのload（ブラウザイベント）を解説します。loadloadはロードが完了した時のイベントです。WEBページや画像、動画などのロード時のイベントに使われます。サンプルHTML属性onload属性を設定します。<img id="image" onload="progress();"><p id="message"></p><button