JS カスタムイベントを作成・発生させる方法と注意すべきポイント

今回は「カスタムイベント」について見ていきましょう。

カスタムイベントとは、名前のとおり、カスタムしたイベント、つまりユーザーが定義したイベントのことになります。

イベントを作成する
イベントを発生させる
イベント作成の注意点
1. UIEvent
2. CustomEvent()
あとがき

イベントを作成する

let event = new Event(event type[, options]);

まず最初にイベントを作成します。

イベントの作成は「Event」オブジェクトを使用して、引数にイベントタイプとオプションを指定します。

event type：

任意の文字列（clickやmouseoverに該当します）

options：

bubbles：true/false、初期値はfalse。trueでバブリング
cancelable：true/false、初期値はfalse。イベントがキャンセル出来るかどうか
composed：true/false、特に覚える必要はありません。

イベントを発生させる

elem.dispatchEvent(event)

イベントを発生させるには、「dispatchEvent()」メソッドを使用します。

引数にはイベントのオブジェクトを指定します。

以下サンプルを見ていきますが、「event.isTrusted」プロパティを使用します。

これは、true/falseを返し、ユーザーアクションの場合はtrue、スクリプトで発生した場合はfalseを返します。

    <div class="div1" id="actnew1">
      div1
      <div class="div2" id="actnew2">
        div2
        <div class="div3" id="actnew3">div3</div>
      </div>
    </div>

let disA = document.getElementById('actnew2');
let disB = document.getElementById('actnew3');

disA.addEventListener('click', function (event) {
  alert('div2 : ' + event.isTrusted);

});

disB.addEventListener('click', function (event) {
  alert('div3 : ' + event.isTrusted);
});

div1

div2

div3

いつものボックスを例に見ていきましょう。

まずは「dispatchEvent()」を使用していない場合です。

「div3」をクリックします。

アラートで、「div3 : true」、「div2 : true」と表示されます。

「div2」をクリックします。

アラートで「div2 : true」と表示されます。

ここまではユーザーアクションで起こっていることですので、当然「true」が返されます。

続いて「dispatchEvent()」を使用した例を見てみましょう。

disA.addEventListener('click', function (event) {
  alert('div2 : ' + event.isTrusted);

  let myevent = new Event('click');
  disB.dispatchEvent(myevent);
});

disB.addEventListener('click', function (event) {
  alert('div3 : ' + event.isTrusted);
});

div1

div2

div3

先程と同様に「div3」をクリックしてみます。

「div3 : true」、「div2 : true」、「div3 : false」と表示されます。

先程まで表示されなかった「div3 : false」が表示されました。

「div2」をクリックすると、「div2 : true」、「div3 : false」と表示されます。

このように通常であればキャプチャリングすることはないのですが、「dispatchEvent()」を使用することにより、イベントを定義することが出来ます。