JavaScriptでイベントを発生させる「addEventListener」
代表コード
target.addEventListener(イベント, 関数, オプション);
良く使うサンプルコード
const target = document.querySelector('.target');
target.addEventListener('click', function(){
alert('hoge')
});
クリックした時に「hoge」とアラート表示。
関数の使い方
そもそも関数について簡単に
同じ処理を使いまわしたい時に便利なもの。 クリックした時に「hoge」というアラートを表示させる処理が複数回必要なときは、最初にその処理を「hoge」という名前をつけて関数に定義する。
サンプルコード
const target_01 = document.querySelector('.target--1');
const target_02 = document.querySelector('.target--2');
const hoge = () => {
alert('hoge');
}
target_01.addEventListener('click', hoge);
target_02.addEventListener('click', hoge);
処理が少ないのでわかりにくいが、alert('hoge');と書くところをhogeと書くだけで済むようになった。
オプションについて
初期値はfalseで子要素から親要素に向けてイベントが伝播する。
親要素のイベントを先に処理するときはtureにするとのことが、まだであったことがない。
