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により、マウスの動きに合わせて選択したエフェクトの表示を実現します。
推薦する
CSS スタイルの優先順位はどれくらい複雑ですか?
昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...
MySQL でよく使われる連結文のまとめ
はじめに: MySQL では、CONCAT() 関数を使用して複数の文字列を 1 つの文字列に連結し...
mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル
はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...
HTMLの空リンクの役割についての簡単な説明
空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...
jQueryのチェーンプログラミングスタイルの詳細な例
チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...
HTML タグのセマンティクス化 (H5 を含む)
導入HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。HTML 自...
ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定
Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...
line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する
まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...
ホームページのデザインはウェブデザイナーのレベルを最もよく反映する
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
Dockerコンテナ終了エラーコードの手順
実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...
SCSS スタイルのコードを 50% 削減する 14 の実践的な経験
序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...
mysql 3つのテーブルを接続してビューを作成する
3 つのテーブルが接続されています。テーブル A のフィールド a はテーブル B のフィールド b...
MySQL データベースは何をしますか?
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
mysql5.7のインストールとNavicateの長期無料利用の実施手順
(I) mysql5.7のインストール: ❀詳細：無料のグリーンバージョン5.7のインストール方法は...
CSSはフロントエンドの画像変形の問題を完璧に解決します
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...