【JavaScript】jQueryのtriggerのように任意のイベントを発火させる

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでjQueryのtrigger()のように任意の要素に設定されたイベントを発火させる方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

任意のイベントを発火させるには

EventTarget.dispatchEvent()で任意のイベントを発火させることができます。dispatchEvent()はリスナーされている任意のイベントを発火させることができます。

dispatchEvent()は下記の記述で呼び出します。

target.dispatchEvent(event)

targetとeventに指定する内容は下記の通りです。

target	イベント発火させる対象を指定します。
event	dispatchされる（発火させる）Eventオブジェクトを指定します。

Eventオブジェクトは下記の方法で生成することができます。

new Event('eventName')

ただ、上記のイベントの生成方法はIEに対応していません。もしIEの対応が必要な場合は、document.createEvent()を使用してイベントを生成するように変更してください。

const event = document.createEvent('eventName')
event.initEvent('eventName', true, true)

dispatchEvent()で任意のイベントを発火させる

では実際にdispatchEvent()を使って任意のイベントを発火させてみます。例として、要素⓵にマウスカーソルを乗せて要素⓶のクリックイベントを発火させる処理を作成してみます。

HTML

<div id="app">
    <div id="elem1">この要素にマウスカーソルを乗せると</div>
    <div id="elem2">この要素のイベントが発火する</div>
</div>

JavaScript

//要素取得
const elem1 = document.getElementById('elem1')
const elem2 = document.getElementById('elem2')

//イベントオブジェクト生成
const triggerEvent = new Event('click')

//#elem1のイベントリスナー
elem1.addEventListener('mouseenter', ()=> {
    elem2.dispatchEvent(triggerEvent)
}, false)

//#elem2のイベントリスナー
elem2.addEventListener('click', ()=> {
    alert('Trigger!!')
}, false)

下記が実行結果です。#elem1にマウスカーソルを乗せると、#elem2をリスナーしているイベントが発火して、ブラウザ上にアラートが表示されます。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

以上でjQueryのtrigger()のように任意のイベントを発火させることが可能となります。

最後に

WEBサイト制作界隈では、jQueryはまだまだ広く使われている状況です。ただ、業界全体で見ると採用率が減ってきているのは間違いありません。jQueryを一通り習熟したら次は純粋なJavaScriptが待っています。少しずつJavaScriptへ置き換えを進めている方にとって、本記事が参考になれば幸いです。

以上、JavaScriptでjQueryのtriggerのように任意のイベントを発火させる方法のご紹介でした！