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タグの理解を学ばなければならない（1）
2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...
マウスが画像のハイパーリンク上を通過するときに画像のサイズ（幅、高さ）を変更する CSS
マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...
CentOS8 jdk8 / java8 のインストールチュートリアル（推奨）
序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...
モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
HTML の順序付きリスト、順序なしリスト、定義リストに関する簡単な説明
順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...
MySQL5.6.31 winx64.zip インストールと設定のチュートリアル
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
JavaScript ベースのランダム点呼システムの実装
この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...
mysql8.0.11 winx64 手動インストールと設定チュートリアル
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル
1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...
js オブザーバーモードの紹介と使用
目次定義2. 使用シナリオ3. 例を挙げる4. コーディング定義オブザーバー パターンは 1 対多の...
CSS でハニカム/六角形アトラスを実装するためのサンプルコード
理由は分かりませんが、UIではハニカム効果（手を広げたような効果）のデザインが好まれます。 1. 六...
【HTML要素】画像の埋め込み方法
img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...
VMwareがLinuxシステムをインストールして起動した後に黒い画面が表示される問題を解決する
1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...
円形グラデーションプログレスバー効果を実現する CSS サンプルコード
実装のアイデア一番外側は大きな円（グラデーションカラー）グラデーションの円を覆うように、内側に半円を...
Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明
実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...