jsイベント委譲の詳細な説明
|
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマンスは低下します。イベント処理が多すぎるという問題を解決するには、イベント委任を行います。 2. イベント委任バブリング: イベント ハンドラーを 1 つだけ指定することで、特定のタイプのすべてのイベントを管理できます。 例
<ul id="myLinks">
<li id="myLi1">テキスト1</li>
<li id="myLi2">テキスト2</li>
<li id="myLi3">テキスト3</li>
</ul>IE9 より前のブラウザのイベント オブジェクトは、グローバル window.event に配置されます。 互換性を解決する: event = event || window.event イベント委任 (つまり、イベントを親/祖父オブジェクトにバインドし、イベント オブジェクトのターゲット属性を通じて子オブジェクトへの変更を制御する)。 event.target (ターゲットオブジェクトがクリックされました)
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
td{
幅: 100ピクセル;
高さ: 100px;
border:2px 赤一色;
}
</スタイル>
</head>
<本文>
<テーブル>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</テーブル>
</本文>
<スクリプト>
var tab = document.getElementsByTagName("table")[0];
tab.onclick = 関数 (イベント) {
// 子オブジェクトをクリックして色を変更します。event.target.style.backgroundColor = "black";
}
</スクリプト>
</html>js イベント委譲の詳しい説明はこれで終わりです。js イベント委譲の理解方法の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML+CSS+JavaScriptにより、マウスの動きに合わせて選択したエフェクトの表示を実現します。
推薦する
vue3.0 sfcのセットアップの変更について簡単に説明します。
目次序文標準的なSFCの書き方スクリプト設定可変露出部品の取り付け小道具カスタムイベント要約する序文...
MySQL 5.7.18 の解凍バージョンをダウンロードしてインストールし、MySQL サービスを開始するための詳細なグラフィック手順
MySQL Community Server 5.7.18 の配布パッケージには .ini ファイル...
純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます
目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...
MySQL データ挿入最適化メソッドconcurrent_insert
スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...
忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
mysql8.0.11 winx64 インストールと設定のチュートリアル
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと共...
フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 2
デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...
JavaScript で配列の最大値と最小値を実装する 6 つの方法
配列[1,8,5,4,3,9,2]が与えられた場合、配列の最大値9と最小値1を取得するアルゴリズムを...
CSS3 を使用して色付きのプログレスバーアニメーションを実装する例
簡単なチュートリアルこれは CSS3 カラー プログレス バー アニメーション効果です。 CSS3 ...
mysql5.5.28 のインストール チュートリアルは非常に詳細です。
参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...
Redis イメージの Docker インストールと設定手順
目次序文環境インストールMySQLコンテナを作成して起動する落とし穴を避けるための注意MySQLコン...
Javascriptの基本ループの詳しい説明
目次サイクルのために入室のためのその間しながら行うループから抜け出す要約するサイクルのためにループは...
MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
Nginx+Apache の動的および静的分離の導入の詳細な例
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...