ホームページ ウェブフロントエンド jsチュートリアル jQueryイベントdelegate()_jqueryの使い方の紹介

jQueryイベントdelegate()_jqueryの使い方の紹介

May 16, 2016 pm 05:48 PM

デリゲートの定義と使用法

delegate() メソッドは、指定された要素 (選択された要素の子要素に属する) に 1 つ以上のイベント ハンドラーを追加し、これらのイベントが発生したときに実行するように指定します。 。

delegate() メソッドを使用するイベント ハンドラーは、現在または将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。

参数 描述
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event

必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。

data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。


構文
$(selector).delegate(childSelector,event,data,function)

戻り値: jQuery delegate(selector,[type],[data], fn)

概要

指定された要素 (選択された要素の子要素) に 1 つ以上のイベント ハンドラーを追加し、これらのイベントが発生したときに実行する関数を指定します。

パラメータ
selector,[type],fnString,String,Function V1.4.2
selector: イベントをトリガーする要素をフィルターするために使用されるセレクター文字列。

type: 要素に関連付けられた 1 つ以上のイベント。スペースで区切られた複数のイベント値。有効なイベントである必要があります。

fn: イベント発生時に実行される関数

selector,[type],[data],fnString,String,Object,Function V1.4.2
selector: セレクター文字列、使用イベントをトリガーする要素をフィルターします。

type: 要素に関連付けられた 1 つ以上のイベント。スペースで区切られた複数のイベント値。有効なイベントである必要があります。

data: 関数に渡される追加データ

fn: イベント発生時に実行される関数

selector, eventsString, String V1.4.3
selector: selector Stringフィルターがイベントをトリガーした要素。

events: 1 つ以上のイベント タイプを実行するための文字列と関数のデータ マップ。


説明:
マウスをクリックしたときに p 要素を表示または非表示にする:

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

<div style="background-color:red">
<p>は段落です。 </p>
<button>ここをクリック</button>

jQuery コード:

コードをコピー コードは次のとおりです:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});

説明: デリゲート メソッドは live() メソッドの代わりに使用でき、各イベントを許可します。特定の DOM 要素にバインドされます。
次の 2 つのコードは同等です:

コードをコピー コードは次のとおりです:
$ ("テーブル").delegate("td", "ホバー", function(){ $(this).toggleClass("ホバー");
});$("テーブル").each (function() { $("td", this).live("hover", function(){ $(this).toggleClass("hover"); });
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

&#x27; this&#x27; JavaScriptで? &#x27; this&#x27; JavaScriptで? Mar 04, 2025 am 01:15 AM

&#x27; this&#x27; JavaScriptで?

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

ソースビューアーでjQueryの知識を向上させます

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

モバイル開発用のモバイルチートシート10個

See all articles