イベントリスナ

2024 5/12

2024.02.24 2024.05.12

記事の内容

記述方法

イベントリスナは、イベントにアクションを紐つける仕組みになります。
※複数のイベントを紐付け可能

イベントリスナ

記法

EventTarget.addEventListener(‘イベントタイプ’, function() {
　// 処理内容
});

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナに関して</title>
  </head>

  <body>
    <label id="label">ボタンを押してください</label>
    <div>
      <button id="btn">ボタン</button>
      <button id="cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let label = document.getElementById("label");
let btn = document.getElementById("btn");
let cancelBtn = document.getElementById("cancel_btn");
let cancelLabel = label.textContent;

// ボタンクリック時
btn.addEventListener('click', function() {
  label.textContent = "ボタンをクリックしましたね！！";
});

// キャンセル時
cancelBtn.addEventListener('click', function() {
  label.textContent = cancelLabel;
});

出力結果

ボタンを押してください

複数イベントリスナを登録

イベントリスナは、複数登録が可能になります。

イベントリスナ(複数)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナに関して</title>
  </head>

  <body>
    <label id="plural_label">ボタンを押してください</label>
    <div>
      <button id="style_btn">追加</button>
      <button id="plural_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let pluralLabel = document.getElementById("plural_label");
let styleBtn = document.getElementById("style_btn");
let pluralCancelBtn = document.getElementById("plural_cancel_btn");

// 文字色を変更する関数
function colorChange(){
  pluralLabel.style.color = "white";
}

// 背景色を変更する関数
function backGroundColorChange(){
  pluralLabel.style.backgroundColor = "black";
}

// サイズを変更する関数
function sizeChange(){
  pluralLabel.style.width = "100px";
  pluralLabel.style.height = "20px";
}

// リセット関数
function styleCancel(){
  label.style.color = "";
  label.style.backgroundColor = "";
  label.style.width = "";
  label.style.height = "";
}

// ボタンクリック時
styleBtn.addEventListener('click', colorChange);
styleBtn.addEventListener('click', backGroundColorChange);
styleBtn.addEventListener('click', sizeChange);

// キャンセルボタン クリック時
pluralCancelBtn.addEventListener('click', styleCancel);

出力結果

ボタンを押してください

イベントリスナ一覧

click・dbclick

要素がクリックやダブルクリックされた時に発火します。

click : クリック
dbclick : ダブルクリック

click・dbclick

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(click・dbclick)に関して</title>
  </head>

  <body>
    <label id="click_label">クリック・ダブルクリックしてください</label>
    <div>
      <button id="click_btn">ボタン</button>
      <button id="click_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let clickLabel = document.getElementById("click_label");
let clickBtn = document.getElementById("click_btn");
let clickCancelBtn = document.getElementById("click_cancel_btn");
let clickCancelLabel = clickLabel.textContent;

// クリック時
clickBtn.addEventListener('click', function() {
  clickLabel.textContent = "ボタンをクリックしましたね！";
});

// ダブルクリック時
clickBtn.addEventListener('dblclick', function() {
  clickLabel.textContent = "ボタンをダブルクリックしましたね！";
});

// キャンセル時
clickCancelBtn.addEventListener('click', function() {
  clickLabel.textContent = clickCancelLabel;
});

出力結果

クリック・ダブルクリックしてください

change

HTML要素の値が変更されたときに発火します。
※input、select、textareaなど

onChange

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(change)に関して</title>
  </head>

  <body>
    <label id="change_label">入力してフォーカス解除をしてください</label>
    <div>
      <input id="change_input" type="text" />
      <button id="change_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let changeLabel = document.getElementById("change_label");
let changeInput = document.getElementById("change_input");
let changeCancelBtn = document.getElementById("change_cancel_btn");
let changeCancelLabel = changeLabel.textContent;

// 変更時
changeInput.addEventListener('change', function() {
  value = changeInput.value;
  if(value != ""){
    changeLabel.textContent = value + "に変更しましたね！！";
  } else {
    changeLabel.textContent = "何か入力してください。";
  }
});

// キャンセル時
changeCancelBtn.addEventListener('click', function() {
  changeLabel.textContent = changeCancelLabel;
});

出力結果

入力してフォーカス解除をしてください

focus・blur

要素からフォーカスしたり、外れた時に発火します。

focus : 要素がフォーカスを受け取ったときに発火
blur : 要素からフォーカスが外れた時に発火

focus・blur

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(focus・blur)に関して</title>
  </head>

  <body>
    <label id="focus_label">フォーカスしたり、解除してみてください。</label>
    <div>
      <input id="focus_input" type="text" />
      <button id="focus_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let focusLabel = document.getElementById("focus_label");
let focusInput = document.getElementById("focus_input");
let focusCancelBtn = document.getElementById("focus_cancel_btn");
let focusCancelLabel = focusLabel.textContent;

// フォーカス時
focusInput.addEventListener('focus', function() {
  focusLabel.textContent = "フォーカスしましたね。";
});

// フォーカス時
focusInput.addEventListener('blur', function() {
  focusLabel.textContent = "フォーカスを外しましたね。";
});

// キャンセル時
focusCancelBtn.addEventListener('click', function() {
  focusLabel.textContent = focusCancelLabel;
});

出力結果

フォーカスしたり、解除してみてください。

mousemove

マウスポインターが要素上で移動するたびに発火します。

mousemove

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>イベントリスナ(mousemove)に関して</title>
  </head>

  <body>
    <label id="mouse_move_label">
      黒枠の中でマウスカーソルを動かしてください。
    </label>
    <div>
      <div id="move_area"></div>
      <button id="move_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let mouseMoveLabel = document.getElementById("mouse_move_label");
let moveArea = document.getElementById("move_area");
let moveCancelBtn = document.getElementById("move_cancel_btn");
let mouseMoveCancelLabel = mouseMoveLabel.textContent;

// マウスを動かした時
moveArea.addEventListener('mousemove', function() {
  var x = event.offsetX;
  var y = event.offsetY;

  mouseMoveLabel.textContent = 'x軸:' + x + 'px Y軸:' + y + 'px';
});

// キャンセル時
moveCancelBtn.addEventListener('click', function() {
  mouseMoveLabel.textContent = mouseMoveCancelLabel;
});

#move_area {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em 0;
}

出力結果

黒枠の中でマウスカーソルを動かしてください。

mouseover・mouseout

マウスポインターが要素に入ったり出た時に発火します。

mouseover : マウスポインターが要素に乗ったときに発火
mouseout : マウスポインターが要素から離れたときに発火

mouseover・mouseout

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>イベントリスナ(mouseover・mouseout)に関して</title>
  </head>

  <body>
    <label id="mouse_over_label">要素をカーソル出入りしてください。</label>
    <div>
      <div id="move_over_area"></div>
      <button id="mouse_over_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let mouseOverLabel = document.getElementById("mouse_over_label");
let moveOverArea = document.getElementById("move_over_area");
let mouseOverCancelBtn = document.getElementById("mouse_over_cancel_btn");
let mouseOverCancelLabel = mouseOverLabel.textContent;

// マウスが要素から入った時
moveOverArea.addEventListener('mouseover', function() {
  mouseOverLabel.textContent = "要素に入りました";
});

// マウスが要素から出た時
moveOverArea.addEventListener('mouseout', function() {
  mouseOverLabel.textContent = "要素から出ました";
});

// キャンセル時
mouseOverCancelBtn.addEventListener('click', function() {
  mouseOverLabel.textContent = mouseOverCancelLabel;
});

#move_over_area {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em 0;
}

出力結果

要素をカーソル出入りしてください。

mouseup・mousedown

ボタンがマウスでクリックされた瞬間と離された瞬間にそれぞれ発火します。

mouseup : マウスでクリックされた瞬間に発火
mousedown : 離された瞬間に発火

mouseup・mousedown

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(mouseup・mousedown)に関して</title>
  </head>

  <body>
    <label id="up_down_label">
      ボタンをアップダウンするとラベルが切り替わります
    </label>
    <div>
      <button id="up_down_btn">アップダウンボタン</button>
      <button id="up_down_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let upDownLabel = document.getElementById("up_down_label");
let upDownBtn = document.getElementById("up_down_btn");
let upDownCancelBtn = document.getElementById("up_down_cancel_btn");
let upDownCancelLabel = upDownLabel.textContent;

// ボタンを押した時
upDownBtn.addEventListener('mousedown', function() {
  upDownLabel.textContent = "ボタンを押しました。";
});

// ボタンを離した時
upDownBtn.addEventListener('mouseup', function() {
  upDownLabel.textContent = "ボタンを離しました。";
});

// キャンセル時
upDownCancelBtn.addEventListener('click', function() {
  upDownLabel.textContent = upDownCancelLabel;
});

出力結果

ボタンをアップダウンするとラベルが切り替わります

keydown・keyup

キーがクリックされた瞬間と離された瞬間にそれぞれ発火します。

keydown : キーが押された瞬間に発火
　修飾キー（Ctrl、Shift、Alt）などは含む
keyup : キーが離された瞬間に発

keydown・keyup

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(keydown・keyup)に関して</title>
  </head>

  <body>
    <label>何かキーを押したり離したりしてください。</label>
    <p id="key_label">入力してください</p>
    <div>
      <input id="key_up_down_input" type="text" />
      <button id="key_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let keyLabel = document.getElementById("key_label");
let keyUpDownInput = document.getElementById("key_up_down_input");
let keyCancelBtn = document.getElementById("key_cancel_btn");
let keyCancelLabel = keyLabel.textContent;

// ボタンを押した時
keyUpDownInput.addEventListener('keydown', function() {
  keyLabel.textContent = "修飾キーを含むボタンが押されました。";
});

// ボタンを離した時
keyUpDownInput.addEventListener('keyup', function() {
  keyLabel.textContent = "修飾キーを含むボタンが離されました。";
});

// キャンセル時
keyCancelBtn.addEventListener('click', function() {
  keyUpDownInput.value = '';
  keyLabel.textContent = keyCancelLabel;
});

出力結果

何かキーを押したり離したりしてください。

入力してください

submit・reset

フォームが送信やリセットされたときに発火します。

submit : フォームが送信されようとするときに発火
reset : フォームがリセットされようとするときに発火

submit・reset

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(submit・reset)に関して</title>
  </head>

  <body>
    <form id="from">
      <label for="username">ユーザー名:</label>
      <input type="text" id="username" name="username" />
      <input type="submit" value="送信" />
      <input type="reset" value="リセット" />
    </form>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let from = document.getElementById("from");

// ボタンを押した時
from.addEventListener('submit', function() {
  var username = document.getElementById("username").value;
  if (username === "") {
    alert("ユーザー名を入力してください");
    return false; // フォームの送信をキャンセル
  }
  return true; // フォームの送信を許可
});

// リセット時
from.addEventListener('reset', function() {
  alert('フォームがリセットされました');  
});

出力結果

input

テキストの入力が行われたたびに発火します。

input

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントリスナ(input)に関して</title>
  </head>

  <body>
    <label id="input_label">何か入力してみてください。</label>
    <div id="output"></div>
    <div>
      <input id="input" type="text" />
      <button id="input_cancel_btn">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

// 要素を取得
let inputLabel = document.getElementById("input_label");
let input = document.getElementById("input");
let output = document.getElementById("output");
let inputCancelBtn = document.getElementById("input_cancel_btn");
let inputCancelLabel = inputLabel.textContent;

// 入力する時
input.addEventListener('input', function() {
  output.textContent = input.value;
});

// // キャンセル時
inputCancelBtn.addEventListener('click', function() {
  input.value = "";
  output.textContent = "";
  inputLabel.textContent = inputCancelLabel;
});

出力結果

何か入力してみてください。