Help us understand the problem. What is going on with this article?

jQueryの.triggerとネイティブイベント

More than 1 year has passed since last update.

jQuery離れを進めようと、少しずつ既存コードをネイティブDOMで書き直しているような箇所もあったりする1のですが、混在すると特有なトラブルに見舞われたりもします。

TL; DR

  • jQueryの.triggerで起きるのは、「jQuery上のイベント」、「on***」、「(起こせるものは)標準操作」だけ
  • addEventListenerでセットしたイベントを駆動させることはない
  • ただ、clickでは「標準操作」がイベントも引き起こす

発生した問題

jQueryで書いていたものを徐々に切り替えていたのですが、jQueryでtriggerしたはずのイベントが、addEventListenerで拾えない、ということが発生しました。

jQueryのイベントシステム

jQuery 1.0が出た頃は、ブラウザのDOMへの対応状況も、現代から見ればめちゃくちゃと言っていい状況でした。そんな中でバブリングなどをきちんと実現するために、jQueryはイベントシステムを自前で構築しています。これは、最新版の3系列でも同じ状況です。

そして、triggerのコードを追いかけてみたところ、以下のような動作になっていました。

  1. DOMの仕様のように、DOMツリーの上からたどって目的の要素を抽出して2、そこについているjQueryイベントとon***を実行していく
  2. ターゲットから上位に戻っていって、引き続きイベントを実行していく
  3. .preventDefault()されていなかった場合、(存在すれば)ネイティブな動作をさせるメソッド(focus()click()submit()など少数派です)を実行する

ということで、addEventListenerでセットされたものを呼ぶのに必要なdispatchEventなどは、どこにもありませんでした。なお、ネイティブのclick()だけは例外的に、「イベントも実行する」メソッドになっていますので、これだけは実行されます。

結論

jQueryのイベントはjQueryでしか受けられないので、カスタムイベントで状態の受け渡しをする系を作っているような場合は、先にイベントをtriggerする側をネイティブに切り替えないと、イベントを拾えなくなります。なお、jQueryもネイティブのaddEventListenerでイベントを拾っていますので、逆に「ネイティブDOMでdispatchEventしたイベントをjQueryのハンドラで拾う」ことは、問題なく可能です。

脚注


  1. SPA移行が現実的でない環境なので、複雑なウィジェットはRiotに移して、そこまで大掛かりにならない部分や、つなぎ目はネイティブに実装、という感じで進めています。 

  2. なお、jQueryにキャプチャフェーズはありません。 

jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。
https://qiitadon.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした