jQuery はイベントの冗長性を減らすためにイベント委任を通じて複数のイベントを一度にバインドします_jquery

そのため、連結は日常の開発で広く使用されており、イベント メソッドの連結は特殊なケースです。複数のイベントを Dom オブジェクトにバインドすると、シリアル書き込みに慣れていますが、この書き込み方法では時間の冗長性が生じます。
1. イベントの冗長性: 複数のイベント メソッドで同じコードを複数回呼び出す
次のコードはイベント メソッドを連結したものです:

コードをコピー コードは次のとおりです:

jQuery(function($) {
$('

').hide().appendTo('body');
vartipTitle = '';
$('#mytable').bind('mouseover', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
var link = $link[0]; link.title;
link.title = '';
$('#livetip').css({
上:event.pageY 12,
left:event.pageX 12
})
.html('

'tipTitle '

' link.href '

')
.show()
};
}).bind('mouseout', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
$link.attr('タイトル',tipTitle);
$('#livetip').hide();
}).bind('mousemove', function(event) {
var $link = $(event.target).closest('a');
if ( $link.length) {
$('#livetip').css({
上:event.pageY 12,
left:event.pageX 12
});
}); 5|6、18|19、および 24|25 は、同じコード部分を複数回使用して、イベント オブジェクトが存在するかどうかを判断します。これは、コード効率とコード ファイル サイズの点で不合理な方法です。

2. イベント委任: 複数のイベントを一度にバインドし、イベント カテゴリに従って対応する操作を委任します。

上記のコードをより最適化するために、イベント委任を通じてコードを変更できます。最終的なコードは次のとおりです。

コードをコピー

コードは次のとおりです。

jQuery(function) ($) { var $liveTip = $('

').hide().appendTo('body'); vartipTitle = ' '; $('#mytable').bind('mouseover Mouseout Mousemove', function(event) { var $link = $(event.target).closest('a');

if (!$ link.length) { return; }

var link = $link[0];
if (event.type == 'mouseover' ||event.type == 'mousemove') {
$liveTip .css({
top:event.pageY 12,
left:event.pageX 12
}); ') {
tipTitle = link.title;
link.title = '';
$liveTip.html('

'tipTitle '

' href '< /div>')
.show()
if (event.type == 'mouseout') {
$liveTip.hide(); if (tipTitle) {
link.title =tipTitle;
});


イベントは処理対象のDOMオブジェクトにバインドされており、イベントのカテゴリを判断してコード内で異なる処理コードを委譲します。これにより、コードの繰り返し定義を回避して、時間の冗長性を回避する効果を得ることができます。
上記 2 つのコードの実行効果はまったく同じで、どちらのコードの実行効率が高いかが一目でわかると思います。
デモのアドレス
http://demo.jb51.net/js/event_delegation/index.html

パッケージのダウンロード
http://www.jb51.net/jiaoben/28044。 html

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

R.E.P.O.で節約説明した（そしてファイルを保存）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7573

15

CakePHP チュートリアル

1386

52

Steamのアカウント名の形式は何ですか

87

11

Win11 Activation Key Permanent

62

19

NYTの接続はヒントと回答です

28

110

もっと見る