events_jquery を自動的にトリガーする JQuery のメソッド

この記事の例では、JQuery がイベントを自動的にトリガーする方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

一般的なシミュレーション

クリック効果を実現するために、ユーザー操作をシミュレートする必要がある場合があります。たとえば、ユーザーがページに入った後、ユーザーが積極的にクリックしなくても、クリック イベントがトリガーされます。

JQuery では、trigger() メソッドを使用してシミュレーション操作を完了できます。たとえば、次のコードを使用して、ID btn のボタンのクリック イベントをトリガーできます。

$('#btn').trigger("click");

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

$('#btn').click();

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

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

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

このイベントをトリガーするには、次のコードを使用できます:

$('#btn').trigger("myClick");

データを渡す

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

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

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

デフォルトアクションを実行

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

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

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

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

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

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

この記事が皆さんの jQuery プログラミングに役立つことを願っています。