職案人

JS--inputイベント

inputイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【inputイベントの使い方】inputイベントはフォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。HTMLElementオブジェクトで発生します。【要素属性：oninputにイベントハンドラーを登録した場合】＜label＞名前：＜inputtype="text"oninput="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【oninputプロパティにイベントハンドラーを登録...JS--inputイベント

2024/09/29 15:41

JS--changeイベント

changeイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【changeイベントとは】フォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベント。【onchange属性を使用する場合】＜label＞名前：＜inputtype="text"onchange="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【onchangeプロパティ】【イベントリスナーを登録した場合】【関数の引数にEventオブジェクトが渡された場合】イベントハンドラやイベントリス...JS--changeイベント

2024/09/27 13:45

KeyboardEventで取得できるキー情報

KeyboardEventに含まれるキー情報【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キーに関するプロパティ】KeyboardEventオブジェクトではイベントが発生したときのキーの情報を参照するためのプロパティが用意されています。・プロパティKeyboardEvent.code押されたキーKeyboardEvent.key押されたキーが表す文字KeyboardEvent.codeはキーボードのどのキーが押されたのかを文字列で返します。それに対してKeyboardEvent.keyは押されたキーが表す文字を文字列で返します。aというキーを単に押したときと、Shift+aを押した場合で結果をみてください。code:KeyA,key:acode:KeyA,key:AKeybo...KeyboardEventで取得できるキー情報

2024/09/25 15:11

JS---MouseEvent オブジェクト

MouseEventオブジェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【座標に関するプロパティ】MouseEvnetオブジェクトではイベントが発生したときのマウスの座標を表すプロパティが用意されています。座標はどこを原点とするかによっていくつかのプロパティが用意されています。MouseEvent.offsetXイベントが発生した要素の左上を原点とする座標MouseEvent.offsetY同上MouseEvent.clientXブラウザの表示エリア左上を原点とする座標MouseEvent.clientY同上MouseEvent.screenXディスプレイの左上を原点とする座標MouseEvent.screenY同上またブラウザで表示しているWebページが縦または横に長く...JS---MouseEventオブジェクト

2024/09/21 20:30

JS--mouseenterイベント,mouseleaveイベント

マウスイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mouseenterイベントとは】mouseenterイベントはマウスのカーソルが要素の上に乗った時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【mouseleaveイベント】mouseleaveイベントはマウスのカーソルが要素のから離れた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【属性値にイベントハンドラを登録する場合】【要素のプロパティにイベントハンドラを登録する場合】【イベントリスナーの場合】【Eventオブジェクトが渡された場合】サンプルコード「マウスイベント.css」#mybox{wi...JS--mouseenterイベント,mouseleaveイベント

2024/09/18 13:54

js--mousemove イベント

mousemoveイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousemoveイベントの使い方】mousemoveイベントはマウスのカーソルが要素の上にある状態で、マウスが動いた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【要素の属性値にイベントハンドラを登録する場合】＜canvasid="mycanvas"onmousemove="mouseMove()"＞＜script＞functionmouseMove(){console.log('MouseMove');}＜/script＞【ノードの要素.プロパティにイベントハンドラを入れる場合】DOMを使って取得した要素のプロパティにイベントハンドラを登録す...js--mousemoveイベント

2024/09/16 20:36

JS--マウスに関するイベント

マウスに関するイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousedownイベントとmouseupイベントの使い方】・mousedownイベントはマウスのカーソルが要素の上にある状態で、マウスが押された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能・mouseupイベントはマウスのカーソルが要素の上にある状態で、マウスが押された状態から離された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【属性値にイベントハンドラを登録した場合】・例文【DOMで得られた要素のプロパティにイベントハンドラを登録する場合】letbutton=document.get...JS--マウスに関するイベント

2024/09/14 11:21

JS--dblclickイベント

dblclickイベント：マウスがダブルクリックされたとき【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【dblclickイベントについて】dblclickイベントはマウスのカーソルが要素の上にある状態で、マウスが極めて短い間隔で二回クリックされた時に発生するイベントです。ondblclick属性またはondblclickプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてdblclickを指定してイベントリスナーを登録できます。【dblclickイベントの使い方】Elementオブジェクトで発生します。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能1.要素の属性値にイベントハンドラを登録する場合...JS--dblclickイベント

2024/09/11 15:05

JS--clickイベント

clickイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【clickイベントの使い方】clickイベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントイベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【onclick属性】要素の属性値にイベントハンドラを登録する場合はonclick属性を使う//属性＝イベントハンドラ＜inputtype="button"value="button"onclick="buttonClick()"＞＜script＞functionbuttonClick(){alert('Click');}＜/script＞【onclickプロパティの場合】DOMを使って取得した要素...JS--clickイベント

2024/09/09 15:59

JS--イベントをコードから発生させる

イベントをコードから発生させる【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コードからのイベント発生】イベントはHTTPページをブラウザで見ているユーザーの操作によって発生しますが、プログラムの中で新しいイベントを作成し指定した対象でイベントを発生させることができます。【新しいイベントを作成する】最初に新しいイベントを作成します。作成するにはEventオブジェクトをのコンストラクタを使用します。書式：newEvent(eventtype[,option])1番目の引数にイベントの種類を表す文字列を指定します。既存のイベントを作成する場合は'click'や'mousedown'などを指定します。カスタムイベントを作成する場合は任意の名前を指定してください。省略可能な2番目の引数...JS--イベントをコードから発生させる

2024/09/06 15:14

JS--デフォルトのキャンセルする

デフォルトのキャンセルする【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントに対するデフォルト】HTMLページをブラウザで開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされ、マウスホイールを回転すると画面がスクロールするといったデフォルトの動作がいくつか設定されています。EventオブジェクトのpreventDefaultメソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。【デフォルトの動作をキャンセルする】EventオブジェクトのpreventDefaultメソッドを使用すると、イベントに対するデフォルトの動作を止め...JS--デフォルトのキャンセルする

2024/09/04 19:55

JS--イベントの伝搬を中断するには

イベントの伝搬を中断するには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キャンセルしたい場合】HTMLページ内でイベントが発生した場合、親要素へとイベントが伝搬していきますが、途中でこれ以上の伝搬を行わないようにイベントの伝搬を停止することができます。また、同じターゲットの同じイベントに対して複数のイベントリスナーを登録できますが、途中で他のまだ呼び出されていないイベントリスナーを呼び出さないように停止することもできます。【イベントの伝搬を止める】EventオブジェクトのstopPropagationメソッドを使用すると、イベントの伝搬を止めることができます。書式：event.stopPropagation()例えばイベントが発生し呼び出されたイベントリスナーの中でこのメソ...JS--イベントの伝搬を中断するには

2024/09/04 11:31

JS--イベントの伝播の流れ：イベントフェーズ

イベントの伝搬【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントフェーズ】このHTMLページの中の'start'ボタンがクリックされたときに、クリックイベントがどのように発生し、どのように伝搬していくのかを理解する。【フェーズの種類】1、キャプチャリングフェーズ(Capturingphase)2、ターゲットフェーズ(TargetPhase)3，バブリングフェーズ(BubblingPhase)【キャプチャリングフェーズ】HTMLページの中の'start'ボタンがクリックされると、一番最上位のオブジェクトであるWindowオブジェクトでまずclickイベントを発生させ、その後DOMツリーの構造に沿って伝播する。Documentオブジェクト→html要素→、body要素→div...JS--イベントの伝播の流れ：イベントフェーズ

2024/09/02 14:35