ドキュメント : Browser
-
【JavaScript】ブラウザイベント入門 - ブラウザのイベントに応じて処理を実行する
JavaScriptのブラウザイベントとイベントハンドラーを解説します。ブラウザイベントブラウザイベントはブラウザのクリックやキーボード入力などのWEBページで発生するイベントです。JavaScriptはHTML要素のクリックなど様々なイベントを検知することができます。イベントハンドラーイベントハンドラーは特定の条件を満たした場合に実行される処理です。JavaScriptはイベントに応じたイベント
-
【JavaScript】Eventオブジェクト - イベント情報をコールバック関数で受け取る
JavaScriptのEventオブジェクトを解説します。EventオブジェクトEventオブジェクトはイベントの情報を表すオブジェクトです。イベントハンドラーのコールバック関数に第1引数として渡されます。<button id="btn">ボタン</button> <script type="text/javascript"> function ou
-
【JavaScript】Eventオブジェクト - イベントをプログラムから発生させる
JavaScriptでブラウザイベントをプログラムから発生させる方法を解説します。イベントの生成Eventオブジェクトのコンストラクタを使ってイベントを生成します。基本構文new Event(イベント種別)サンプル<button id="btn">ボタン</button><script type="text/javascript"> function ou
-
-
【JavaScript】ブラウザイベントのバブリングと制御
JavaScriptのブラウザイベントにおけるバブリングと制御を解説します。バブリングイベントは発生した要素から親要素へと伝搬します。このことをJavaScriptではバブリングと呼びます。その様子をサンプルで確認しましょう。<main id="main"> <div id="div"> <button id="button">ボタン<
-
【JavaScript】click(ブラウザイベント) - クリック時のイベント
JavaScriptのclick(ブラウザイベント)を解説します。clickclickは要素がクリックしたときのイベントです。デスクトップパソコンのマウス(カーソル)やスマートフォンのタップでイベントを発生します。サンプルHTML属性onclick属性を設定します。<button id="button" onclick="greeting();">ボタン</button>&
-
-
-
【JavaScript】focus(ブラウザイベント) - フォーカスが当たった時のイベント
JavaScriptのfocus(ブラウザイベント)を解説します。focusfocusは要素にフォーカスが当たったときのイベントです。サンプルHTML属性onfocus属性を設定します。<input id="input" onfocus="greeting();"><p id="message"></p><script type="text/javascr
-
【JavaScript】change(ブラウザイベント) - 値の変更が確定した時のイベント
JavaScriptのchange(ブラウザイベント)を解説します。changechangeは値の変更が確定したときのイベントです。input要素やtext要素で値を入力し、エンターキー入力やフォーカスを外すと値が確定します。サンプルHTML属性onchange属性を設定します。<input id="input" onchange="valueRender(event);"><p
-
【JavaScript】input(ブラウザイベント) - 値が変更した時のイベント
JavaScriptのinput(ブラウザイベント)を解説します。inputinputは値が変更した時のイベントです。input要素やtext要素で値を入力するごとにイベントが発生します。サンプルHTML属性oninput属性を設定します。<input id="input" oninput="valueRender(event);"><p id="message"><
-
-
【JavaScript】load(ブラウザイベント) - ロードが完了した時のイベント
JavaScriptのload(ブラウザイベント)を解説します。loadloadはロードが完了した時のイベントです。WEBページや画像、動画などのロード時のイベントに使われます。サンプルHTML属性onload属性を設定します。<img id="image" onload="progress();"><p id="message"></p><button