JQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。-jsチュートリアル-php.cn

JQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。

巴扎黑

リリース： 2017-06-25 13:31:34

オリジナル

1332 人が閲覧しました

Web ページの特殊効果を作成する場合、シミュレーション操作、つまり手動操作をシミュレートする必要がある場合があります。このとき、JQueryの2つのシミュレーション操作メソッドtrigger()とtriggerHandler()を考えます。これら 2 つの方法はどちらも手動操作を簡単にシミュレートできますが、両者の違いは何でしょうか?以下では、簡単なケースを通してそれらの違いを紹介します。このケースの効果: ページを更新すると、ボタンをクリックした場合の効果が自動的にシミュレートされ、プロンプトが表示されます。

まず、新しいページを作成し、次の HTML コードをページに追加します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>

ログイン後にコピー

この HTML コードのフォームには 2 つのボタンがあり、その値は「aaa」と「bbb」です。今、これら 2 つのボタンをクリックします。そのうちの 1 つは http://wanlimm.com ページを取得します。

次に、の間に JS コードを追加します。

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;);
});

ログイン後にコピー

ここで使用するトリガーメソッドは、ポップアップウィンドウの表示を 2 回更新します。 " と bbb" をそれぞれ入力し、フォーム動作を使用して http://wanlimm.com ページに自動的にジャンプします。

trigger をtriggerHandler に置き換えると、ポップアップウィンドウが 1 つだけになり、フォームの動作がブロックされ、http://wanlimm.com ページに自動的にジャンプしなくなります。

次に、次のように HTML コード内の青いフォームコードを削除し、CSS メソッドを JS コードに追加します。

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;).css(&#39;color&#39;,&#39;red&#39;);
});

ログイン後にコピー

ページを更新すると、2 つのポップアップの後、ボタン内のテキストが次のようになります。赤。ただし、トリガーがtriggerHandlerに変更された場合、ページを更新した後、ウィンドウは1回だけポップアップし、テキストは赤くなりません。

trigger とtriggerHandler の違いを要約すると、次のようになります。

1.triggerHandler() メソッドはイベントのデフォルトの動作をトリガーしませんが、trigger() はトリガーします。

2.triggerHandler() メソッドは最初に一致した要素にのみ影響しますが、.trigger() はすべての要素に影響します。

3. TriggerHandler() メソッドは、オブジェクトではなく、現在のイベント実行の戻り値を返すため、他のメソッドに接続できません。イベントトリガー要素が含まれています。

4. イベントの作成時にtriggerHandler()はバブルしません。 trigger() はバブルしますが、この種のバブルはカスタムイベントによってのみ反映されます。

以上がJQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。