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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptでjQueryのtrigger()みたいにスクリプト上からイベントを発火させるには、どうすればいいの?

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

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

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

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

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

target.dispatchEvent(event)

targeteventに指定する内容は下記の通りです。

targetイベント発火させる対象を指定します。
eventdispatchされる(発火させる)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.

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

最後に

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

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍