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プロジェクトの支払い機能コードの詳細な説明
1. Alipay方式： Alipay メソッド: Alipay をクリックして支払い、バックエンド...
JavaScript クロージャの説明
目次1. クロージャとは何ですか? 2. クロージャの役割2.1) メモリ2.2) プライベート変数...
jQueryはHTML要素の非表示と表示を実装します
商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...
Vueは製品の拡大鏡効果を実現します
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード
序文：私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
GZIP 圧縮 Tomcat と Web パフォーマンスの改善プロセス図
1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...
純粋なCSSで立体的な画像配置効果を実現するサンプルコード
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
10分でCSS3グリッドレイアウトを理解する
基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...
同じページを動的にロードするための Vue ルーティングリスニングの例
目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...
HTML チュートリアル: 定義リスト
<br />原文: http://andymao.com/andy/post/104.h...
Dockerは1行のコマンドでFTPサービス構築の実装を完了します
1行のコマンド docker run -d \ -v /share:/home/vsftpd \ -...
HTTPプロトコルにおけるステータスコードの意味
暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...
Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...
VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法
序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...
CSSに基づいてマウス入力の方向を決定する
以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...