JavaScript イベントの概念の詳細な説明 (静的登録と動的登録の区別)

JavaScript イベントの概念の詳細な説明 (静的登録と動的登録の区別)

js のイベント

イベントとは何ですか?イベントは、コンピューターの入力デバイスとページ間のやり取りに対する応答であり、これをイベントと呼びます。

イベントタイプ

  • マウス クリック: たとえば、ボタンをクリックする、チェックボックスまたはラジオ ボタンを選択する、マウスがページ上のホットスポットに入る、ホットスポット上に移動する、またはホットスポットから出る: たとえば、マウスが画像上で停止する、またはテーブルに入るなど。
  • キーボードのキー: キーが押されたとき、または放されたとき。
  • HTML イベント: たとえば、ページ本体が読み込まれたとき、フォーム内の入力ボックスを選択したとき、または入力ボックス内のテキストの内容を変更したとき (たとえば、テキスト ボックスの内容が選択または変更されたとき)。
  • ミューテーション イベント: 主に、DomSubtreeModified (DOM サブツリーの変更) など、ドキュメントの基礎となる要素が変更されたときにトリガーされるイベントを指します。

一般的なイベント

  • onload 読み込み完了イベント: ページが読み込まれた後、ページのjsコードを初期化するために使用されることが多い
  • onclick クリック イベント: 通常、ボタンのクリック応答操作に使用されます。
  • onblur フォーカスを失ったイベント: 入力ボックスがフォーカスを失った後に入力内容が正当かどうかを確認するためによく使用されます。
  • onchangeコンテンツ変更イベント: ドロップダウンリストや入力ボックスのコンテンツ変更後の操作によく使用されます。
  • onsubmit フォーム送信イベント: フォームが送信される前に、すべてのフォーム項目が有効かどうかを確認するためによく使用されます。

イベント登録

イベント登録(バインディング)とは何ですか?
実際には、イベントに応答したときにどの操作コードを実行するかをブラウザに指示します。これは、イベント登録またはイベント バインディングと呼ばれます。
イベント登録は静的登録と動的登録に分かれます。

  • 静的登録イベント: HTMLタグのイベント属性を介してイベント応答後のコードを直接割り当てます。この方法は静的登録と呼ばれます。
  • 動的登録イベント: まずJSコードを介してタグのDOMオブジェクトを取得し、次にDOMオブジェクトを介してイベント応答後のコードを割り当てることを意味します。イベント名 = function(){} この形式は動的登録と呼ばれます

動的登録の基本的な手順:

1. タグオブジェクトを取得する
2. タグオブジェクト。イベント名 = function(){}

静的および動的登録の例

onload 読み込み完了イベント

静的バインディング:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>静的登録</title>
  <script type="text/javascript">
  // onload イベントメソッド関数 onloadFun() {
   alert('onload イベント、すべてのコードを静的に登録します');
   }
  </スクリプト>
</head>
<!--onload イベントを静的に登録します。onload イベントは、ブラウザがページを解析した後に自動的にトリガーされるイベントです。body タグの属性は、この属性を通じて登録されます -->
<body content="onloadFun();">
</本文>
</html>

動的バインディング:

window.onload(){} メソッドを介して中括弧内のメソッドを呼び出す書き込み方法を修正しました。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>動的登録</title>
  <script type="text/javascript">
   // onload イベントの動的登録。固定の書き方です。window.onload = function() {
   alert("動的に登録された onload イベント");
   }
  </スクリプト>
</head>
<本文>
</本文>
</html>

onclick クリックイベント

たとえば、この例から 2 つの定義の違いをよりよく理解できます。

onclick 静的バインディング イベント

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<script type="text/javascript">
 関数onclickFun() {
  alert("onclick イベントを静的に登録します");
 }
</スクリプト>
</head>
<本文>
<!-- ボタンの onclick 属性を通じて onClick イベントを静的に登録します -->
<button onclick="onclickFun();">ボタン 1</button>
</本文>
</html>

onclick 動的バインディング イベント

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<script type="text/javascript">
   window.onload = 関数(){
   //getElementById は id 属性を通じてタグ オブジェクトを取得します var btnObj = document.getElementById("btn01");
   // 2 タグオブジェクトを介して。イベント名 = function(){}
   btnObj.onclick = 関数 () {
    alert("動的に登録された onclick イベント");
   }
   }
</スクリプト>
</head>
<本文>
 
<button id="btn01">ボタン 2</button>
</本文>
</html>

上記は、JavaScript イベントの概念(静的登録と動的登録の区別)の詳細な説明の詳細な内容です。JavaScript イベントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript におけるスコープチェーンの概念と使用法
  • JavaScript オブジェクト指向のコア知識と概念の要約
  • node.js におけるプロセスの概念と child_process モジュールの使用例
  • JavaScript におけるクロージャの概念と使用法の分析
  • JSの基本概念の詳細な紹介

<<:  MySQL 最適化: キャッシュ最適化

>>:  Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

推薦する

CSS エクスペリエンスを充実させる 5 つの便利な CSS セレクターを紹介します

Web デザイナーとして豊富な CSS 経験を持つ私たちは、あらゆる種類のコード構文、互換性、スニペ...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

設定操作からMySQLへのNULLが見つからない問題を解決する

興味深い発見:合計 1000 件のレコードを含むテーブルがあります。クエリ ステートメントは次のよう...

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...

nginx のロケーションと書き換えの使用法の詳細な説明

1. 位置情報の利用状況の概要ロケーションは、さまざまな処理方法に対してさまざまな種類のリクエストを...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...

Linux の一般的なコマンド chmod を使用して、ファイルの権限 777 と 754 を変更します。

よく使用されるコマンドは次のとおりです。 chmod 777 文件或目錄例: chmod 777 /...

SQLと各種NoSQLデータベースの使用シナリオの説明

SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...

Three.js が Facebook Metaverse 3D ダイナミック ロゴ効果を実現

目次背景メタバースとは何ですか?成果を達成するトライアル 1: THREE.TorusGeometr...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...

MySQL ユーザー権限管理の実装

1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

JavaScriptでカレンダー効果を素早く実装

この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...