【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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら