jQuery は 4 つのイベント監視メソッドを提供します: 1. binding() を使用すると、選択した要素に 1 つ以上のイベント ハンドラーを追加し、イベント処理関数を設定できます; 2. live() を使用すると、1 つを追加できます現在または将来の一致する要素に 1 つ以上のイベント ハンドラーを追加し、処理関数を設定します。 3. delegate() を使用すると、指定した要素 (選択した要素の子要素に属する) プログラムに 1 つ以上のイベント ハンドラーを追加できます。 4 on() を使用すると、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加できます。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
jQuery は、イベントをバインドするさまざまな方法を提供します。それぞれの方法には独自の特徴があります。それらの類似点と相違点を理解することは、コードを書くときに正しい選択をするのに役立ち、エレガントで簡単な Produce を書くことができます。コードを保守します。 jQuery でイベントをバインドする方法を見てみましょう。
jQuery には、bind、live、delegate、on という 4 つのイベント監視メソッドが用意されています。監視のブロックを解除する対応する関数は、unbind、die、undelegate、off
1 です。 Blind
#定義と使用法: 選択した要素に 1 つ以上のイベント ハンドラーを追加し、イベントの発生時に実行する関数を指定します。 文法:$(selector).blind("事件类型"，data,function(){});
//data是传入函数的参数用event.data获取（平时用的.click()等都是其简化用法）機能
- 静的ページに適用可能。呼び出し時にすでに存在する要素にのみバインドでき、バインドすることはできません。追加された要素バインディング
- は、ページがロードされたときにのみブラインド化されます;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").bind("click", function() {
console.log("这个段落被点击了。");
});
});
</script>
</head>
<body>
<p>点我！</p>
</body>
</html>
2, live#定義: 現在または将来の一致する要素に 1 つ以上のイベント ハンドラーを追加します。
構文:
live("事件类型",data, 函数名);//data可选特徴: live はイベントをそれ自体 (this) にバインドしませんが、this.context
イベント委任メカニズムを使用してイベントの監視と処理を完了します。ノードの処理はドキュメントに委ねられます。
新しく追加された要素は再度リスナーにバインドする必要はなく、複数のイベントで処理できます。
ノードの後ろにのみ配置できます。直接選択された要素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").live("click", function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我!</button>
<br><br>
</body>
</html>
注: live() メソッドは jQuery バージョン 1.7 で非推奨となり、バージョン 1.9 で削除されました。代わりに on() メソッドを使用してください。
delegate() メソッドは、指定された要素 (選択された要素の子要素に属する) に 1 つ以上のイベント ハンドラーを追加し、いつこれらのイベントが発生したときに実行される関数。
delegate() メソッドを使用するイベント ハンドラーは、現在または将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。
構文:
delegate(selector,type,[data],fn)
特徴: 狭い範囲でのイベント プロキシのより正確な使用、.live() よりも優れたパフォーマンス。動的に追加された要素に使用できます。
("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素例:
要素をクリックすると、すべての
要素の背景色が変更されます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("div").delegate("p", "click", function() {
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这个段落在 div 元素内。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>
定義: リスニング イベントを最も近い親要素にバインドします
##構文:on(type, 选择器，方法)機能: 親要素の下に新しく追加されたタグのイベント リスニングを使用することもできます
- また、複数回のイベント処理もサポートします
-
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").on("click", function() {
console.log("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>
[推奨学習: 
jQuery ビデオ チュートリアル
Web フロントエンド ビデオ ]
以上がjqueryイベントを監視するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AMReactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。
HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AMReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。
反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PMReactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。
厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PMReact Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。
断片の使用法を使用しますApr 02, 2025 pm 05:50 PM反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。
反応調整プロセスApr 02, 2025 pm 05:49 PMこの記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています
仮想DOMが説明しましたApr 02, 2025 pm 05:49 PMこの記事では、直接的なDOM操作を最小限に抑え、更新を最適化することでパフォーマンスを向上させるWeb開発の重要な概念である仮想DOMについて説明します。
要素とコンポーネントの区別Apr 02, 2025 pm 05:46 PMこの記事では、ソフトウェア開発における要素とコンポーネントの区別について説明し、プロジェクト管理への役割、違い、影響を強調しています。主な問題には、ユーザーインターファック内の複雑さ、再利用性、および機能が含まれます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7450
15137452