ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryイベントを監視するにはどのような方法がありますか?
jqueryイベントを監視するにはどのような方法がありますか?
- 青灯夜游オリジナル
- 2022-06-10 13:55:583687ブラウズ
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 サイトの他の関連記事を参照してください。