JavaScriptを基本からまとめてみた【8】【addEventListener関数】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##addEventListener関数を使い方
削除ボタンを押したときに何かの処理を実行したいときは
addEventListener関数を使う。

第一引数にはイベント(クリック,スクロールなど)を第二引数には実行したい関数を渡す。

削除ボタンが押されたときにタスクを削除したいので
『deleteButton』がクリックされたときにdeleteTaskを呼び出して欲しいとする。

関数の定義方法はいくつか種類があるが、一番良く使用されているアロー関数を使用。

deleteButton.addEventListener('click', () => deleteTask(taskId))

次にdeleteTask関数を作成。

deleteTaskの引数には削除したいタスクのIDを渡す。
remove関数を呼び出してタスク(テーブルの一行の要素)を削除する。

const deleteTask = (taskId) => {
  const task = document.getElementById(taskId)
  task.remove()
}