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により、マウスの動きに合わせて選択したエフェクトの表示を実現します。
推薦する
Vue の echarts ツールチップにクリック イベントを追加する詳細な説明
目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...
クールなページング効果を実現するネイティブJS
この記事では、次のような効果を持つ JS ページング効果の例を紹介します。クールだと思いませんか? ...
MySQL における「:=」と「=」の違いの簡単な分析
=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の場合は等号の効果があ...
表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための CSS の例コード
今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応さ...
Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする
問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...
docker-compose を使用して MySQL を実行する方法
ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...
Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要
1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...
Alibaba Cloud ドメイン名と IP バインディングの手順と方法
1 Alibaba Cloud コンソールに入り、ドメイン名コンソールを見つけて、バインドするドメイ...
すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください
各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...
Linux で Jenkins プロジェクトを構築するプロセス (CentOS 7 を例に)
https://gitee.com/tengge1/ShadowEditor のデプロイメントを例...
nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法
効果現在、プロジェクトは2つ（project1、project2）あり、nginxに付属するinde...
MySQLデータベースの使用仕様の概要
導入： MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...
JavaScript 型検出方法の例のチュートリアル
序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...
Dockerで同じIDを持つ2つのイメージを削除する
今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...
複数人チャットルームを実現する js コード
この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...