今回は、addEventListenerについて学んだことをまとめました。
addEventListenerとは
～Crebitテキストより～
一言でいうと、「〇〇（イベント）が起きたら、この関数を実行してね！」
とブラウザに命令する仕組みです。
たとえば
「クリックしたとき」
「文字を入力したとき」
など、こうしたきっかけをイベントと呼びます。
基本的な書き方
対象の要素.addEventListener(イベント名, 関数);
・最初の イベント名 → 「クリック」や「入力」などの種類（第1引数）
・次の 関数 → 実際に実行する処理（第2引数）
イベントは複数でも対応できる？
addEventListener は1つの要素に対して複数のイベントを設定できます。
HTML
<button>クリックしてね</button>
JavaScript
let button = document.querySelector(“button”);
function clickHandler() {
console.log(“クリックされました”);
}
function mouseoverHandler() {
console.log(“マウスが乗りました”);
}
button.addEventListener(“click”, clickHandler);
button.addEventListener(“mouseover”, mouseoverHandler);
このように、
・クリックしたとき
・マウスが乗ったとき
それぞれ違う処理を設定できます。
イベントは1つだけじゃなくて、何個でも追加できます。
また、同じイベントを複数設定した場合、クリックすると両方実行されます。
（イベントが上書きされるのではなく、追加されるイメージです）
addEventListener と onclick の違い
onclick
→ イベントを1つしか設定できない（後から書くと上書き）
addEventListener
→ 何個でも追加できる
そのため、いまはaddEventListener を使うのが一般的です。
まとめ
addEventListener は、
「この要素で、こんなことが起きたら、この処理をしてね」
とブラウザにお願いする仕組みです。
1つの要素に、複数のイベントや処理を設定できるのが特徴で、
JavaScriptではとてもよく使われます。
色んなイベントを試して、使いこなしていきたいです。