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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: