jQueryトリガー（）メソッド：jQueryでカスタムイベントを作成する方法

私の前の記事では、JavaScriptでカスタムイベントを作成する方法 、カスタムイベントとネイティブのCustomeventオブジェクトの利点について説明しました。要約すると、独自の名前のイベントを解雇できます。 DemonStationページには、有効なメッセージが送信されるたびに「NewMessage」イベントを起動するフォームが提供されました。多くのハンドラーがこのイベントを購読して、独自のアクションを実行できます。 私たちの唯一の問題：Customeventは現在、SafariやInternet Explorerでサポートされていません。 ブラウザの互換性の問題を回避する方法があります。解決策の1つは、カスタムイベント機能を実装する独自のイベントカプセル化関数を作成することです。幸いなことに、必要はありません。JQueryを含むいくつかのJavaScriptライブラリでカスタムイベントがサポートされています。 jQueryの.triggerメソッドが重要です。任意の時点で、新しいタイプ名と任意のデータを使用してイベントをトリガーできます。

$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

ハンドラーは、「NewMessage」イベントを購読できるようになりました。

$(document).on("newMessage", newMessageHandler);

デモンストレーションページ

この例は、jQueryコードを示しています。 jQueryカスタムイベントデモンストレーションページを表示します 標準のイベントハンドラーは、HTMLフォームの送信を探します。この関数は現在のメッセージを取得し、有効であると仮定すると、新しい「NewMessage」イベントを発送します。

$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

ハンドラーは「NewMessage」イベントを購読できるようになりました。イベントは、有効なメッセージがある場合にのみ提起されます。

// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

メッセージ自体は、イベントオブジェクトのメッセージプロパティから抽出できます。

ブラウザの互換性

jQuery 1.xメソッドは、インターネットエクスプローラー6.0以上を含むブラウザで実行されます。明らかに、それはコードがネイティブの偶然よりも（無意味に）遅くなったとしても、大きなボーナスです。ただし、2013年にリリースする予定のJQuery 2.0は、IE6、7、および8をサポートしていないことに注意してください。 jQueryは人気がありますが、プロトタイプ、Mootools、YuiなどのほとんどのJavaScriptライブラリでカスタムイベントがサポートされています 。 そして、この投稿を読んで楽しんだなら、あなたは学ぶことができるようになるでしょう。マスターから新鮮なスキルとテクニックを学ぶ場所。メンバーは、JQuery：Novice to Ninja：New Kicks and Tricksなど、SitePointのすべての電子ブックやインタラクティブなオンラインコースに即座にアクセスできます。 この記事へのコメントは閉じられています。 jqueryについて質問がありますか？フォーラムで聞いてみませんか？ jQueryカスタムイベントに関するよくある質問（FAQ）

jQueryカスタムイベントとは何ですか？なぜ重要なのか？それらは、アプリケーションのさまざまな部分で再利用できる動作をカプセル化する方法を提供するため、重要です。これにより、重複を減らし、懸念の分離を促進することにより、よりクリーンで保守可能なコードにつながる可能性があります。

jQueryでカスタムイベントを作成するにはどうすればよいですか？

​​

jQueryでカスタムイベントを作成するのは簡単です。 .trigger（）メソッドを使用して、カスタムイベントをトリガーできます。簡単な例は次のとおりです。

$（document）.trigger（ 'mycustomevent'）;

この例では、「mycustomevent」はカスタムイベントの名前です。 jqueryのカスタムイベントハンドラーにデータを渡すにはどうすればよいですか？

jqueryのカスタムイベントハンドラーにデータを渡すことができます。 .trigger（）メソッド。この引数は、任意のJavaScriptオブジェクトです。例は次のとおりです。

$（document）.trigger（ 'mycustomevent'、{key： 'value'}）;

この例では、オブジェクト{key： 'value'}イベントハンドラーに渡された。 方法。例は次のとおりです。

$（document）.on（ 'mycustomevent'、function（event、data）{

console.log（data.key）; // 'value'

}） ;

この例では、.on（）メソッドに提供される関数はイベントハンドラーです。 jquery？

はい、イベントオブジェクトの.stoppropagation（）メソッドを呼び出すことで、jqueryでのカスタムイベントの伝播を停止できます。例は次のとおりです。

$（document）.on（ 'mycustomevent'、function（event）{
event.stoppropagation（）;
}）;

この例の例、StopPropagation（）メソッドにより、イベントがDOMツリーの泡立ちを防ぎます。

はい、イベントオブジェクトの.preventdefault（）メソッドを呼び出すことにより、jQueryでのカスタムイベントのデフォルトアクションを防ぐことができます。例は次のとおりです。

$（document）.on（ 'mycustomevent'、function（event）{
event.preventdefault（）;
}）;

この例の例、PreventDefault（）メソッドは、イベントに関連付けられたデフォルトのアクションを防ぎます。
はい、.on（）メソッドの代わりに.one（）メソッドを使用して、jqueryで1回だけカスタムイベントをトリガーできます。例は次のとおりです。

$（document）。この例では、「mycustomevent」が複数回トリガーされたとしても、イベントハンドラーは1回だけ呼び出されます。 jqueryのハンドラー？

はい、.off（）メソッドを使用してjqueryでカスタムイベントハンドラーを削除できます。例は次のとおりです。

$（document）.off（ 'mycustomevent'）;

この例では、ドキュメント上の「mycustomevent」のすべてのハンドラーが削除されます。 jqueryで手動でカスタムイベントをトリガーできますか？
​​
はい、.trigger（）メソッドを使用してjqueryで手動でカスタムイベントをトリガーできます。例は次のとおりです。

$（document）.trigger（ 'mycustomevent'）;

この例では、「mycustomevent」が手動でトリガーされます

jqueryのカスタムイベントに複数のハンドラーをバインドできますか？

​​

はい、同じイベント名で.on（）メソッドを複数回呼び出すことで、jqueryのカスタムイベントに複数のハンドラーをバインドできます。例は次のとおりです。

$（document）.on（ 'mycustomevent'、function（）{
console.log（ 'handler 1'）;
}）;

$（document）.on（ 'mycustomevent'、function（）{ console.log（ 'handler 2 '）;
}）;

この例では、「mycustomevent」がトリガーされたときに両方のハンドラーが呼び出されます。

以上がjQueryトリガー（）メソッド：jQueryでカスタムイベントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。