JavaScriptでコード内でイベントを発生させる方法

ブラウザ上でユーザーが何も操作をすることなく、イベントを発生させたい場合の話。

コード内で自分で作ったイベントを発生させる方法の備忘録。

JavaScriptでコード内でイベントを発生させる方法1
JavaScriptでコード内でイベントを発生させる方法2 (addEventListenerを使ってもよい)
連想配列をつくってイベントハンドラに渡してもよい？

JavaScriptでコード内でイベントを発生させる方法1

先にコードを書いておく。

HTMLは

  <p><span id="aaa">[押して]</span></p>
  <p id="eventinfo"></p>
  <p id="targetinfo"></p>

HTML側には「押して」という文字を用意した。これにaaaというidをつけておく。
また結果を表示するためのeventinfoとtargetinfoというidを付けたpタグを用意。

JavaScriptは

//aaaに対するイベントリスナーの登録
let abc = document.getElementById('aaa');
abc.onclick = clicked;

//コード内でイベントを発生
let eee = new Event('click');
abc.dispatchEvent(eee);

function clicked(e) {
  let eventinfo = document.getElementById('eventinfo');
  //イベントのプロパティを表示してみる
  eventinfo.innerHTML = e + "<br>"
  + "e.bubbles : " + e.bubbles + "<br>"
  + "e.cancelable : " + e.cancelable + "<br>"
  + "e.currentTarget : " + e.currentTarget + "<br>"
  + "e.eventPhase : " + e.eventPhase + "<br>"
  + "e.target :" + e.target + "<br>"
  + "e.timeStamp : " + e.timeStamp + "<br>"
  + "e.type : " + e.type + "<br>"
  + "e.isTrusted : " + e.isTrusted + "<br>";
  
  //e.targetオブジェクトを表示してみる
  let targetinfo = document.getElementById('targetinfo');
  targetinfo.innerHTML = e.target + "<br>"
  + "タグ名 e.target.tagName : " + e.target.tagName + "<br>"
  + "e.target.id : " + e.target.id + "<br>"
  + "e.target.innerHTML : " + e.target.innerHTML + "<br>"
  + "e.target.textContent : " + e.target.textContent + "<br>";
}

JavaScript側ではaaaで「押して」のオブジェクトを取得。onclickプロパティにclickedメソッドを設定。

6、7行目で自前のコード内イベントを生成。
Eventオブジェクトをnewして、引数にclickを渡している。引数に渡す文字列によって発生させるイベントのタイプを指定できる。
dispatchEventにそのイベントを渡せば、clickedメソッドが動く。

clickedの中では、発生したeを表示したり、e.targetを表示したりしている。

eのプロパティってどんなのがあるんだろう、e.targetのプロパティってどんなのがあるんだろうと思って表示してみた。

See the Pen
event-dispatchevent by pghappy (@pghappy)
on CodePen.

JavaScriptでコード内でイベントを発生させる方法2 (addEventListenerを使ってもよい)

//aaaに対するイベントリスナーの登録
let abc = document.getElementById('aaa');

abc.addEventListener('click', function(e){
  let eventinfo = document.getElementById('eventinfo');
  //イベントのプロパティを表示してみる
  eventinfo.innerHTML = e + "<br>"
  + "e.bubbles : " + e.bubbles + "<br>"
  + "e.cancelable : " + e.cancelable + "<br>"
  + "e.currentTarget : " + e.currentTarget + "<br>"
  + "e.eventPhase : " + e.eventPhase + "<br>"
  + "e.target :" + e.target + "<br>"
  + "e.timeStamp : " + e.timeStamp + "<br>"
  + "e.type : " + e.type + "<br>"
  + "e.isTrusted : " + e.isTrusted + "<br>";
  
  //e.targetオブジェクトを表示してみる
  let targetinfo = document.getElementById('targetinfo');
  targetinfo.innerHTML = e.target + "<br>"
  + "タグ名 e.target.tagName : " + e.target.tagName + "<br>"
  + "e.target.id : " + e.target.id + "<br>"
  + "e.target.innerHTML : " + e.target.innerHTML + "<br>"
  + "e.target.textContent : " + e.target.textContent + "<br>";
});

//コード内でイベントを発生
let eee = new Event('click');
abc.dispatchEvent(eee);

See the Pen
event-dispatchevent by pghappy (@pghappy)
on CodePen.