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('click'); });
ここで使用するトリガー メソッドは、ポップアップ ウィンドウの表示を 2 回更新します。 " と bbb" をそれぞれ入力し、フォーム動作を使用して http://wanlimm.com ページに自動的にジャンプします。
trigger をtriggerHandler に置き換えると、ポップアップ ウィンドウが 1 つだけになり、フォームの動作がブロックされ、http://wanlimm.com ページに自動的にジャンプしなくなります。
次に、次のように HTML コード内の青いフォーム コードを削除し、CSS メソッドを JS コードに追加します。
$(function(){ $(":submit").click(function(e){ alert($(this).val()); }).trigger('click').css('color','red'); });
ページを更新すると、2 つのポップアップの後、ボタン内のテキストが次のようになります。赤。ただし、トリガーがtriggerHandlerに変更された場合、ページを更新した後、ウィンドウは1回だけポップアップし、テキストは赤くなりません。
trigger とtriggerHandler の違いを要約すると、次のようになります。
1.triggerHandler() メソッドはイベントのデフォルトの動作をトリガーしませんが、trigger() はトリガーします。
2.triggerHandler() メソッドは最初に一致した要素にのみ影響しますが、.trigger() はすべての要素に影響します。
3. TriggerHandler() メソッドは、オブジェクトではなく、現在のイベント実行の戻り値を返すため、他のメソッドに接続できません。イベントトリガー要素が含まれています。
4. イベントの作成時にtriggerHandler()はバブルしません。 trigger() はバブルしますが、この種のバブルはカスタム イベントによってのみ反映されます。
以上がJQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。