2022/03/29

【JavaScript】addEventListenerまとめ

Code

addEventListener()ってなんだっけ？
addEventListener()が効かない、反応しない
addEventListener()でエラーになる

このような疑問に回答します。

本記事の内容

addEventListener()する前に要素を取得
addEvenListener('click', () => { ... });を設定
ボタンをクリックするたびにテキストを入れ替える
ボタンをクリックするたびにテキストを増やす
ボタンをクリックして数値を増減

`addEventListener()`する前に要素を取得

なにをaddEventListener()したいか、まずは要素を取得する必要があります。たとえば、下の1文でbutton要素を取得します。

const button = document.querySelector('button');

button要素は、値が変わらないのでconstで宣言しています。これを定数と呼びます。定数の値は、変更ができず、再宣言もできないので、なるべく constを使いつつ、どうしても必要なときにletを使います。理由は、割り当てた値がころころ変わると、コードを読む時に分かりづらく、混乱するからです。

const（定数）で宣言 → 値が変わる場合、let（変数）で宣言

要素の取得はdocument.querySelectorでOK！

要素(`h1`,`p`,`button`など)	`document.querySelector('要素');`
ID属性	`document.querySelector('#ID属性の名前');`
ID属性	`document.getElementById('ID属性の名前');`
複数の要素(`li`,`p`,`div`など)	`document.querySelectorAll('要素');`

document.querySelectorは要素もID属性も取得できるので、下記の理解でOKです。

単体の要素　→ document.querySelector
複数の要素　→ document.querySelectorAll

`addEvenListener('click', () => { ... });`を設定

clickしたら、{ … }の分が発動するという仕組みです。例えばbutton要素をクリックしたら、文字が「こんにちは」から「Hello」に変わる、とするのは以下の通り。

HTML

<button>ボタン</button>
<p>こんにちは</p>

JavaScript

{
  const button = document.querySelector('button')
  const text = document.querySelector('p')
  button.addEventListener('click', () => {
    text.textContent='Hello';
  }
});

わざわざ、constで定義しなくても書けます。

JavaScript

{
  document.querySelector('button').addEventListener('click', () => {
    document.querySelector('p').textContent = 'Hello';
  });
}

ボタンをクリックするたびにテキストを入れ替える

HTML

<button>ボタン</button>
<p id="text1">私は</p>
<p id="text2">人間です</p>

JavaScript

{
  const text1 = document.querySelector("#text1");
  const text2 = document.querySelector("#text2");

  document.querySelector("button").addEventListener("click", () => {
    [text1.textContent, text2.textContent] = [text2.textContent, text1.textContent];
  });
}

ボタンをクリックするたびにテキストを増やす

HTML

<section>
<p id="message">がんばれ！</p>
</section>
<button>+</button>

JavaScript

{
document.querySelector('button').addEventListener('click', () => {
    const message = document.querySelector('#message');
    message.textContent += message.textContent;

    const section = document.querySelector('section');
    section.appendChild(message);
}

ボタンをクリックして数値を増減

HTML

<div>0</div>
<button id="down">-1</button>
<button id="up">+1</button>

JavaScript

{
  let i = 0;
  const down = document.getElementById('down');
  const up = document.getElementById('up');
  const text = document.querySelector('div');

  down.addEventListener('click', () => {
    i--;
    text.textContent = i;
  });

  up.addEventListener('click', () => {
    i++;
    text.textContent = i;
  });
}

code