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

JS カスタムイベントを理解しよう Java Script
スポンサーリンク

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

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

スポンサーリンク

イベントを作成する

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()」を使用することにより、イベントを定義することが出来ます。

イベント作成の注意点

UIEvent

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

イベント作成時に、Eventオブジェクトを使用した書き方をご紹介しましたが、「new Event」の部分は発生させたいイベントタイプにより以下のオブジェクトに変更して書くようにしてください。

  • マウスイベント:newMouseEvent
  • キーイベント:newKeyboardEvent
  • フォーカスイベント:newForcusEvent
  • インプットイベント:newInputEvent
  • ホイールイベント:newWheelEvent

MDN : UIEvent

CustomEvent()

先程の例では、イベントタイプを「click」に指定していました。

イベントを定義しましたがあくまでも既存のものを使用しています。

ユーザーが独自のイベントを作成する場合は「CustomEvent」を使用します。

  • ユーザー独自イベント:newCustomEvent
スポンサーリンク

あとがき

簡単ですが、「カスタムイベント」についてご紹介させて頂きました。

実際に使用する機会もあると思いますので、ぜひ基本的な使い方をマスターしておきましょう。

今回も最後までお読み頂きありがとうございました。

タイトルとURLをコピーしました