イベント名にドットを含むカスタムイベントを jQuery で捕捉するにはどのような記述をすればよいのでしょうか。
それとも不可能なのでしょうか。
問題となるのは次のようなコードです:
$(element).on('my.event', listener);
element.dispatchEvent(new CustomEvent('my.event'));
一行目で 'my.event' に対するコールバック listener を設定し,二行目でイベントを生じさせています。
実現したいのは,二行目の記述で listener を呼ぶことです。
しかし jQuery にとってイベント名 'my.event' が指すのは名前空間 '.event' 付きイベント 'my' のことであるため,このコードではコールバックが実行されません。
jQuery はあきらめて,この部分だけ
element.addEventListener('my.event', listener);
などと書くほかないのでしょうか。
回答よろしくお願いします。
このようなことをしたい理由:
jQuery に依存しないオブジェクトを定義し,その中でカスタムイベントを発生させています。
そのときのカスタムイベント名にクラス名をプレフィックスとして付けているのです。
たとえば
new CustonEvent('NameSpace.ClassName:click');
などです。
プレフィックスを変えれば済む話ではあるのですが,何かほかの手はないものかと質問した次第です。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
よくわかっていないのと、jQeryの処理内容を確認していないので半分推測での回答ですが…
確かに
event.dispatchEvent(new CustomEvent('my.event'));
では、イベントを捕捉できないようで、カスタムイベントに関しては別に処理をしている可能性がありますね。
ただし、jQueryのメソッドである
$(element).trigger("my.event");
を用いれば、捕捉可能なようです。
(こちらを用いることで、ブラウザ互換の利点もあります)
この際に、ご指摘のようにmy.eventでもmy.event2でもevent.typeはmyとされてしまうようですが、listenerにはちゃんと区別して渡されているようです。
イベント処理側で名前空間を確認する必要がある場合は、event.namespaceで取得できそうです。
少々いい加減な回答なので、ご自身で確認なさってください。
何かのヒントにでもなれば幸いです。
回答ありがとうございます。
たしかに .trigger() を使えばドットを含むイベント名でもキャッチできるようです。
ただ,それでは jQuery に依存しないオブジェクトを定義することができません。
やはり無理なことなのかもしれません。
fujillin さんに回答をいただき,複雑なイベント名はあきらめることを決心しました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- 英語 atが1文で二回出てくるのはおかしいですよね。すっきりした英文にしたいです。教えてください。 1 2023/03/24 20:20
- その他(趣味・アウトドア・車) 寝台特急カシオペアについて 2 2023/06/10 13:59
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- 英語 丁寧な伺い(参加可否を促したい)英文を知りたいです。 2 2022/06/28 06:57
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- 英語 「this is the/my first time~」の文法上の制約について 1 2023/04/06 09:48
- 英語 高校英語の問題 1 2023/05/23 15:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
フォームが空欄の時にフォーム...
-
スマホ上で、左右スワイプで次...
-
プログラムがうまく動きません...
-
Colorboxがうまく設置できません
-
画面遷移を行わずに同一ページ...
-
初心者です。gulpでコンパイル...
-
console.logがどうしても2つ機...
-
Googleフォームで選択肢に応じ...
-
イラストレーター、縦中横のシ...
-
【GAS】WEBアプリでハイパーリ...
-
特定の文字列を複数抜き出した...
-
sessionStorageを調べています。
-
読み込んだQRコードをフォーム...
-
jsで質問です。 ボタンが二つ存...
-
階層別の組織図の自動作成について
-
コードレビューをお願いします。
-
セレクトボックスで配列を呼び...
-
HTMLタグに複数のクラスを設定...
-
コードレビューをお願いします。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エラー(型が一致しません。)...
-
VB6でユーザー定義型がNothing...
-
関数定義について質問です 架空...
-
TextChangeイベントが発生しない
-
#define 文
-
LRESULTとHRESULT
-
ifdefとenum
-
fetchでreturnで戻り値
-
時間差を取得結果を求めるには
-
PHP + MySQL で登録時に重複チ...
-
jQueryの関数内の変数について...
-
VBS 名前定義の確認→ありかなし...
-
char[]とchar*
-
アクティブなウィンドウのみ、...
-
jQuery でドット含むカスタムイ...
-
関数内でのグローバル変数
-
【javaScript】KeyboardEventで...
-
VB.NET の配列の要素数
-
変な質問ですみません、n番目の...
-
c++ cmathとmath.h
おすすめ情報