jQueryを使わないでイベント発火させたい
▼ 例えばいくつか例をあげるとすると
- ボタンのclickイベントを発火せさたい
- 入力欄でinputイベントを発火させたい
jQuery・jQueryのtrigger()を使わず、
JavaScriptだけでイベント発火させたかったです。
その方法は意外と忘れがちです。
そこで自分自身への忘備録も兼ねて、
JSだけでイベント発火させる方法をまとめておきます。
このページの目次
jQuery.trigger()はイベント発火に便利ではあるが…
jQueryはDOM操作に本当に便利です。
イベント発火させるのはtriggerを使えば１行です。
▼ 例えばbutton要素でclickイベント発火させる
|
1 2 |
const $btn = $('.hoge.btn') $btn.trigger('click') |
▼ 例えばinput要素でchangeイベント発火させる
|
1 2 |
const $input = $('.hoge.input') $input.trigger('change') |
本当にjQueryって楽ですね。
ただ $btn.trigger('click') を実行するだけです。
でもどんな環境・条件でも使えるとは限りません。
- jQuery以外のDOM操作ライブラリを使っている
- 環境的にjQueryの導入が難しくてできない
- 宗教的な理由でどうしてもjQueryを入れたくない
そういう時はJavaScriptだけで何とかします。
発火させるイベントがclickならclick()を使えばOK
最初は基本的なclickイベントの発火について
これは後述する方法でも発火されてます。
でも次のイベントは発火用のメソッドが用意されてます。
▼ HTMLElement.click()
HTMLElement.click() メソッドは、要素のマウスクリックをシミュレートします。click() を対応している要素（<input> など）で使用すると、要素の click イベントが発行されます。 このイベントは、文書ツリー（またはイベントチェーン）の上位の要素にバブルアップし、click イベントを発生させます。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click
▼ 簡単な使い方コード例
|
1 2 |
/// clickイベントを発火させる document.getElementById('hoge-btn').click() |
マウス・タッチ操作でボタンとかを押すときclickイベントが発火します。それと全く同じclickイベントをシミュレーションできるのがclick()メソッドです。
だからclickイベントを発火させたい場合、
このメソッドを呼び出しておけば楽です。
イベントをコード的に発火させる汎用的な方法がこれ
発火させたいイベントがclickイベント以外の場合…
例えばJSには色々な標準イベントがあります。
- mousedown
- mousemove
- mouseup
- touchstart
- touchmove
- touchend
- change
挙げていくとキリがないけど代表例として。
それをコード的に発火させるのが目的です。
その方法を箇条書きすると次の手順になります。
- 発火用のEventオブジェクト作成
- dispatchEventからイベントを発火させる
jQueryより少し大変というか複雑になります。
少なくとも１行で書けるようなAPIはありません。
実際にどのような手順というと次のコードです。
▼ 例えばchangeイベントを発火させるコード例
|
1 2 3 4 5 6 7 8 9 |
/// 対象のinput要素 const $input = ... /// changeイベントを発火させる const ev = new Event("change", { bubbles: false, cancelable: true }) $input.dispatchEvent(ev) |
このようにEventオブジェクトの第１引数に "change" , "mousemove" , "touchmove" みたいなイベント名を渡して発火させるだけです。
ちなみに第２引数のオプションは次が取れます
- bubbles
イベントがバブリングするかどうかで false が規定値
- cancelable
イベントがキャンセル可能かどうかで false が既定値
- composed
イベントがシャドウルートの外のリスナーに伝わるかどうかで false が規定値。（詳細 : https://developer.mozilla.org/ja/docs/Web/API/Event/composed)
必要に応じてオプションを付けてください。
ただしinitEvent()は非推奨なので使わない方がいい
これが任意イベントを発火させる方法です。
そして以前までは別の書き方もありました。
▼ 以前はこういう書き方が主流だった
|
1 2 3 |
const evt = document.createEvent("HTMLEvents") evt.initEvent("change", false, true) elem.dispatchEvent(evt) |
これも最新ブラウザで動いているけど……
この書き方は非推奨になったので注意！
実はEvent.initEvent()はウエブ標準から削除されます。
▼ 非推奨であることのソース
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/Event/initEvent
僕もこの
Event.initEvent() を使ってました。
そして互換性の面からサポートはされ続けるかも。
でも「突然動作しなくなる可能性」もあります。
リスク軽減のために修正していきたいです。
以上、JSで独自イベント発火でした。ではまた
