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 サンプルコード

序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...

Docker Compose で利用可能な環境変数の詳細な説明

Compose のいくつかの部分は、何らかの方法で環境変数を扱います。このチュートリアルは、必要な情...

知っておくべき JS 配列削減の高度な使い方 25 選

序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...

MySQL での IN データボリュームの使用の最適化された記録

MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

CentOS7.4 で JDK1.8 をインストールするためのグラフィカル チュートリアル

Linux インストール JDK1.8 手順1. CentOS に独自の openJDK があるかど...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

Javascriptでシンプルなナビゲーションバーを実装

この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的な...

Bootstrap FileInputは画像アップロード機能を実装します

この記事の例では、Bootstrap FileInputの具体的なコードを共有して、画像アップロード...

Docker でコンテナのポート マッピングを動的に変更する方法

前書き: Docker のポート マッピングは、多くの場合、Docker Run コマンド中に -p...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...