JS イベントとは、ブラウザのフォームまたは HTML 要素で発生し、JS コード ブロックの実行をトリガーする動作を指します。次に、関連するイベントを見てみましょう。 1. フォームイベントたとえば、onload イベント: ページが完全に読み込まれると (画像、js ファイル、css ファイルなどを含む)、このイベントがトリガーされます。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フラワードッグオンライン</title> <スクリプト> window.onload = 関数(){ var mydiv = document.getElementById("mydiv"); alert("ページの読み込みが完了しました。mydiv の内容は次のとおりです: "+mydiv.innerText); } </スクリプト> </head> <本文> <div id='mydiv'>私は花犬であり、花犬の花であり、花犬の犬です。 </div> </本文> </html>
2. マウスイベントたとえば、マウスが左ボタンをクリックすると、onclick イベントが発生します。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フラワードッグオンライン</title> <スタイル> html,本文{ 幅: 100%; 高さ: 100%; } </スタイル> <スクリプト> 関数 マウスクリック(){ alert('ページがクリックされました'); } </スクリプト> </head> <body onclick="マウスクリック()"> <div id='mydiv'>私は花犬であり、花犬の花であり、花犬の犬です。 </div> </本文> </html>
3. キーボードイベント<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フラワードッグオンライン</title> <スタイル> html,本文{ 背景色: アクアマリン; 幅: 100%; 高さ: 100%; } </スタイル> <スクリプト> 関数keydown(イベント){ イベントキーコード==37の場合 alert(event.keyCode +'左ボタンを押しました'); } イベントキーコードが38の場合 alert(event.keyCode +'上キーが押されました'); } if(イベント.keyCode==39){ alert(event.keyCode +'正しいボタンを押しました'); } イベントキーコードが40の場合 alert(event.keyCode +'下矢印キーが押されました'); } } </スクリプト> </head> <body onkeydown="keydown(イベント)"> </本文> </html> 4. 共通イベントメソッド(ウィンドウイベント、マウスイベント、キーボードイベント、テキストイベントを含む)
5. イベントバブリングとイベントキャプチャイベントが発生すると、イベント ストリームが生成されます。HTML 要素がイベントを生成すると、イベントは再帰と戻りと同様に、特定の順序で要素ノードとルート ノードの間で伝播されます。イベントをトリガーする方法は次のとおりです: addEventListener("click","doSomething","true"); 3 番目のパラメータが true の場合はイベント キャプチャ、false の場合はイベント バブリング、デフォルトはバブリングです。 キャプチャイベントの伝播: バブリングイベントの伝播 これで、JavaScript を使用して一般的なイベントを処理する方法に関するこの記事は終了です。js を使用して一般的なイベントを処理する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド
>>: IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...
最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...
[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...
3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...
質問:私のブログのエンコーディングは utf-8 です。ページを開くと空白になっていることもあります...
1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...
たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...
目次序文1. 環境設定1.1 achartsをインストールする1.2 グローバル参照2. ドーナツチ...
前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...
目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...
原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...
1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...
Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...
効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...