ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery を使用してイベントを自動的にトリガーする方法
jQuery を使用してイベントを自動的にトリガーする方法
- WBOYオリジナル
- 2016-05-16 15:29:061268ブラウズ
場合によっては、ユーザーがページに入った後など、クリック効果を実現するためにユーザー操作をシミュレートする必要があります
積極的にクリックせずに、クリック イベントをトリガーするだけです。
たとえば、次のコード:
<body>
<a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">点击1</a>
<a href="#" onclick="javascript:document.getElementById('d').innerHTML='x2'">点击2</a>
<a href="#" onclick="javascript:document.getElementById('d').innerHTML='x3'">点击3</a>
</br>
<span id="d"></span>
</body>
その結果、「クリック 1」ページには x1 が表示され、「クリック 2」ページには x2 が表示されます...
ただし、最初のエントリ ページがデフォルトで「クリック 1」になるようにする必要があります
jQuery では、trigger() メソッドを使用してシミュレーション操作を完了できます。
たとえば、次のコードを使用して、リンク A のクリック イベントをトリガーできます。
$('a').first().trigger("click");
このようにして、ページが読み込まれると、最初の A リンクのクリック イベントがトリガーされ、ページに x1 が表示されます
カスタム イベントをトリガーする
trigger() メソッドは、ブラウザでサポートされているのと同じ名前でイベントをトリガーできるだけでなく、カスタム名でイベントをトリガーすることもできます。
たとえば、「myEvent」イベントを要素にバインドする場合、jQuery コードは次のようになります:
$('#btn').bind("myEvent", function(){
alert("自定义事件");
});
このイベントをトリガーするには、次のコードを使用できます:
$('#btn').trigger("myEvent");
データを渡す
trigger(type,[data]) メソッドには 2 つのパラメータがあります、
最初のものは、トリガーされるイベント オブジェクトまたはイベント タイプです。
2 番目のパラメーターはイベント処理関数に渡される追加パラメーターであり、 は配列の形式で渡されます。これは通常、パラメータを
に渡すことによって行われます。
このイベントがコードによってトリガーされたかユーザーによってトリガーされたかを区別するコールバック関数。
以下はデータを渡す例です。
$('#btn').bind("myEvent", function(event,message1,message2){
alert(message1 + "," + message2);
});
$('#btn').trigger("myEvent", ["Hello","World!"]);
上記は、jQuery を使用してイベントを自動的にトリガーする方法です。皆さんの学習に役立つことを願っています。