ホームページ  >  記事  >  ウェブフロントエンド  >  使用状況の共有: jQuery を使用してイベントを自動的にトリガーする方法

使用状況の共有: jQuery を使用してイベントを自動的にトリガーする方法

巴扎黑
巴扎黑オリジナル
2017-06-25 13:29:161355ブラウズ

この記事では、主に jQuery 自動トリガー イベント トリガーの使用方法を紹介します。必要な友達はそれを参照してください。

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

たとえば、次のコード:


<body>
  <a href="#" onclick="javascript:document.getElementById(&#39;d&#39;).innerHTML=&#39;x1&#39;">点击1</a>
  <a href="#" onclick="javascript:document.getElementById(&#39;d&#39;).innerHTML=&#39;x2&#39;">点击2</a>
  <a href="#" onclick="javascript:document.getElementById(&#39;d&#39;).innerHTML=&#39;x3&#39;">点击3</a>
  </br>
  <span id="d"></span>
</body>

その効果は、x1 が「Click 1」ページに表示され、x2 が「Click 2」ページに表示されることです...
ただし、これには必要があります。初めてページにアクセスしたときのデフォルトのページが「Click 1」であることが実装されます

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

$('a').first().trigger("click");

このように、ページが読み込まれると、最初の A リンクのクリック イベントがトリガーされ、ページがx1 が表示されます

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

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


$(&#39;#btn&#39;).bind("myEvent", function(){ 
  alert("自定义事件");
});

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

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

データを渡す

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

$(&#39;#btn&#39;).bind("myEvent", function(event,message1,message2){ 
  alert(message1 + "," + message2);
});
$(&#39;#btn&#39;).trigger("myEvent", ["Hello","World!"]);

以上は、jQuery を使用してイベントを自動的にトリガーする方法です。皆さんの学習に役立つことを願っています。

以上が使用状況の共有: jQuery を使用してイベントを自動的にトリガーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。