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リダイレクトを実装しています
アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...
RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...
1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...
以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...
効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...
背景会社のサブプロジェクトが増えるにつれて、さまざまなサイズのプロジェクトが10個以上になります(バ...
目次質問解決質問この問題には多くの理由があるようです。私の問題は、パラメータ付きのURLを更新できな...
目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...
IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...
任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...
関数を記述できます。主に正規表現を使用して判断を行います。入力文字が空の場合は、「-」を使用して置き...
1. MySQLイメージを見つける ドッカーps 2. ミラーmysqlイメージを入力する dock...
テーブルフィールドを追加する テーブルtable1を変更し、トランザクタvarchar(10)をNu...