ホームページ > 記事 > ウェブフロントエンド > JQuery はクリックイベントをシミュレートし、イベントを自動的にトリガーします

JQuery はクリックイベントをシミュレートし、イベントを自動的にトリガーします

小云云オリジナル: 2017-11-17 11:51:1638840ブラウズ

場合によっては、クリック効果を実現するためにユーザー操作をシミュレートする必要があります。たとえば、ユーザーがページに入った後、ユーザーが積極的にクリックしなくても、クリックイベントがトリガーされます。 JQuery では、trigger() メソッドを使用してシミュレーション操作を完了できます。たとえば、次のコードを使用して、ID btn のボタンのクリックイベントをトリガーできます。この記事では、JQuery がクリックイベントをシミュレートし、イベントを自動的にトリガーする方法について説明します。

 $(&#39;#btn&#39;).trigger("click");

このようにして、ページが読み込まれると、必要な効果がすぐに出力されます。 click() を直接省略して同じ効果を実現することもできます。

$(&#39;#btn&#39;).click();

カスタムイベントをトリガーする

trigger() メソッドは、ブラウザーでサポートされている同じ名前でイベントをトリガーするだけでなく、カスタム名でイベントをトリガーすることもできます。たとえば、「myClick」イベントを要素にバインドするための JQuery コードは次のとおりです:

  $(&#39;#btn&#39;).bind("myClick", function(){      
 $(&#39;#test&#39;).append("<p>我的自定义事件.</p>");      
 });

このイベントをトリガーしたい場合は、次のコードを使用してそれを実現できます:

$(&#39;#btn&#39;).trigger("myClick");

データを渡す

trigger (type[, data]) メソッドには 2 つのメソッドパラメーターがあります。最初のパラメーターはトリガーされるイベントタイプで、2 番目のパラメーターはイベント処理関数に渡される追加データであり、配列の形式で渡されます。通常、コールバック関数にパラメーターを渡すことで、イベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別できます。

以下はデータを渡す例です。

$(function(){      
$(&#39;#btn&#39;).bind("myClick", function(event, message1, message2){      
$(&#39;#test&#39;).append( "<p>"+message1 + message2 +"</p>");      
 });      
 $(&#39;#btn&#39;).click(function(){      
 $(this).trigger("myClick",["我的自定义","事件"]);      
}).trigger("myClick",["我的自定义","事件"]);      
 })

デフォルト操作を実行します

trigger() メソッドがイベントをトリガーした後、ブラウザーのデフォルト操作が実行されます。例:

 $("input").trigger("focus");

上記のコードは、d5fd7aea971a85678ba271703566ebfd 要素にバインドされた focus イベントをトリガーするだけでなく、d5fd7aea971a85678ba271703566ebfd 要素自体にもフォーカスを取得します (これはブラウザーのデフォルトの操作です)。

ブラウザのデフォルト操作を実行せずに、バインドされたフォーカスイベントのみをトリガーしたい場合は、jQuery の別の同様のメソッドであるtriggerHandler() メソッドを使用できます。

$("input").triggerHandler("focus");

このメソッドは、d5fd7aea971a85678ba271703566ebfd 要素にバインドされた特定のイベントをトリガーし、同時にこのイベントに対するブラウザーのデフォルトの操作をキャンセルします。つまり、テキストボックスはバインドされたフォーカスイベントのみをトリガーし、受信しません。集中。

この記事では、クリックイベントをシミュレートし、イベントを自動的にトリガーするための JQuery を主に紹介します。

JQuery はクリック イベントをシミュレートし、イベントを自動的にトリガーします

関連記事

JQuery はクリックイベントをシミュレートし、イベントを自動的にトリガーします