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により、マウスの動きに合わせて選択したエフェクトの表示を実現します。
推薦する
HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
同期スクロールを実現するための複数のテーブル要素のサンプルコード
Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...
Centos 6.9 に MySQL をインストールするための詳細なチュートリアル
1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...
Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明
1. Dockerをインストールするyum -y install docker-ioインストールが完...
JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる
データ共有プロトタイプにはどのようなデータを書き込む必要がありますか?共有する必要があるデータはプロ...
js キャンバスはスライダー検証を実現します
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
MySQL の問題を解決する: MSVCR120.dll が見つからないため、コードの実行を続行できません
1. 問題MySQL の初期化時に発生する問題は、次のとおりです。 1. 「MSVCR120.dll...
MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)
使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...
Vue+Openlayer で select を使用して要素を選択する実装コード
効果画像: 実装コード: <テンプレート> <div id="map&q...
HTML タグのカスタム属性に関する質問
以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社の...
ハイパーコネクションの4つの状態の適用の詳細な説明
ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。...
Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...
Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要
目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...
ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ
注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...
Yahooが開発したウェブページスコアリングプラグインYSlowのスコアリングルール
YSlow は、Yahoo USA が開発したページ スコアリング プラグインです。非常に優れていま...