MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. イベントハンドラ

イベントハンドラ

JavaScript
2024.02.23
記事の内容

記述方法

イベントハンドラは、イベントが発生した際に実行される関数やコードのことを指します。
※HTML要素の属性として直接定義される場合が多い

イベントハンドラの説明図
イベントハンドラ
記法

<タグ名 onイベント名=”関数名”></タグ名>
<タグ名 onイベント名=”処理内容”></タグ名>

<!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 onclick="textChange()">ボタン</button>
      <button onclick="cancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let label = document.getElementById("label");
let cancelLabel = label.textContent;

// ボタンクリック時の関数
function textChange() {
  label.textContent = "ボタンをクリックしましたね！！";
}

// キャンセル時の関数
function cancel() {
  label.textContent = cancelLabel;
}
出力結果

イベントハンドラ一覧

onclick・ondbclick

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

onclick : クリック
ondbclick : ダブルクリック

onClick・onDbClick
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントハンドラ(onClick・onDbClick)に関して</title>
  </head>

  <body>
    <label id="click_label">ボタンを押してください</label>
    <div>
      <button onclick="clickTextChange()" ondblclick="dbClickTextChange()">
        ボタン
      </button>
      <button onclick="clickTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let clickLabel = document.getElementById("click_label");
let clickCancelLabel = clickLabel.textContent;

// ボタンクリック時の関数
function clickTextChange() {
  clickLabel.textContent = "クリックしましたね！！";
}

// ボタンダブルクリック時の関数
function dbClickTextChange() {
  clickLabel.textContent = "タブルクリックしましたね！！";
}

// キャンセル時の関数
function clickTextCancel() {
  clickLabel.textContent = clickCancelLabel;
}
出力結果

onchange

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>イベントハンドラ(onchange)に関して</title>
  </head>

  <body>
    <label id="change_label">入力してフォーカス解除をしてください</label>
    <div>
      <input id="change_input" type="text" onchange="changeText()" />
      <button onclick="changeTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let changeInput = document.getElementById("change_input");
let changeLabel = document.getElementById("change_label");
let changeCancelLabel = changeLabel.textContent;

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

// キャンセル時の関数
function changeTextCancel() {
  changeInput.value = '';
  changeLabel.textContent = changeCancelLabel;
}
出力結果

onforcus・onblur

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

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

onforcus・onblur
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントハンドラ(onforcus・onblurに関して</title>
  </head>

  <body>
    <label id="select_label">フォーカスしたり、解除してみてください。</label>
    <div>
      <input
        type="text"
        onblur="blurTxetChange()"
        onfocus="focusTxetChange()"
      />
      <button onclick="selectInputCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let selectLabel = document.getElementById("select_label");
let selectCancelLabel = selectLabel.textContent;

// フォーカス時の関数
function focusTxetChange() {
  selectLabel.textContent = "フォーカスしましたね。";
}

// フォーカス解除時の関数
function blurTxetChange() {
  selectLabel.textContent = "フォーカスを外しましたね。";
}

// キャンセル時の関数
function selectInputCancel() {
  selectLabel.textContent = selectCancelLabel;
}
出力結果

onmousemove

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

onmousemove
<!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>イベントハンドラ(onmousemove)に関して</title>
  </head>

  <body>
    <label id="mouse_move_label">黒枠の中でマウスカーソルを動かしてください。</label>
    <div>
      <div id="move_area" onmousemove="mouseMoveTextCnahge(event)"></div>
      <button onclick="mouseMoveTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let mouseMoveLabel = document.getElementById("mouse_move_label");
let mouseMoveCancelLabel = mouseMoveLabel.textContent;

// マウスを動かした時の関数
function mouseMoveTextCnahge(event) {
  var x = event.offsetX;
  var y = event.offsetY;

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

// キャンセル時の関数
function mouseMoveTextCancel() {
  mouseMoveLabel.textContent = mouseMoveCancelLabel;
}
#move_area {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em 0;
}
出力結果

onmouseover・onmouseout

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

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

onmouseover・onmouseout
<!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>イベントハンドラ(onmouseover・onmouseout)に関して</title>
  </head>

  <body>
    <label id="mouse_over_label">要素をカーソル出入りしてください。</label>
    <div>
      <div id="move_area"
        onmouseover="mouseOverTextCnahge()"
        onmouseout="mouseOutTextCnahge()">
      </div>
      <button onclick="mouseOverTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let mouseOverLabel = document.getElementById("mouse_over_label");
let mouseOverCancelLabel = mouseOverLabel.textContent;

// マウスが要素から入った時の関数
function mouseOverTextCnahge() {
  mouseOverLabel.textContent = "要素に入りました";
}

// マウスが要素から出た時の関数
function mouseOutTextCnahge() {
  mouseOverLabel.textContent = "要素から出ました";
}

// キャンセル時の関数
function mouseOverTextCancel() {
  mouseOverLabel.textContent = mouseOverCancelLabel;
}
#move_area {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em 0;
}
出力結果

onmouseup・onmousedown

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

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

onmouseup・onmousedown
<!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>イベントハンドラ(onmouseup・onmousedown)に関して</title>
  </head>

  <body>
    <label id="up_down_label"
      >ボタンをアップダウンするとラベルが切り替わります</label
    >
    <div>
      <button
        onmouseup="mouseupTextCnahge()"
        onmousedown="mousedownTextCnahge()">
        アップダウンボタン
      </button>
      <button onclick="upDownTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let upDownLabel = document.getElementById("up_down_label");
let upDownCancelLabel = upDownLabel.textContent;

// ボタンを押した時の関数
function mousedownTextCnahge() {
  upDownLabel.textContent = "ボタンを押しました。";
}

// ボタンを離した時の関数
function mouseupTextCnahge() {
  upDownLabel.textContent = "ボタンを離しました。";
}

// キャンセル時の関数
function upDownTextCancel() {
  upDownLabel.textContent = upDownCancelLabel;
}
出力結果

onkeypress・onkeydown・onkeyup

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

onkeypress : キーが押された瞬間に発火
　修飾キー（Ctrl、Shift、Alt）などは含まない
onkeydown : キーが押された瞬間に発火
　修飾キー（Ctrl、Shift、Alt）などは含む
onkeyup : キーが離された瞬間に発火

onkeypress・onkeydown・onkeyup
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントハンドラ(onkeypress・onkeydown・onkeyup)に関して</title>
  </head>

  <body>
    <label>何かキーを押したり離したりしてください。</label>
    <p id="key_up_down_label">入力してください</p>
    <div>
      <input
        id="key_up_down_input"
        type="text"
        onkeypress="onkeypressTextCnahge()"
        onkeydown="onkeydownTextCnahge()"
        onkeyup="onkeyupTextCnahge()"
      />
      <button onclick="keyUpDownTextCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let keyUpDwwnLabel = document.getElementById("key_up_down_label");
let keyUpDownInput = document.getElementById("key_up_down_input");
let keyUpDownCancelLabel = keyUpDwwnLabel.textContent;

// ボタンを押した時の関数
function onkeypressTextCnahge() {
  keyUpDwwnLabel.textContent = "修飾キーを含まないボタンが押されました。";
}

// ボタンを押した時の関数
function onkeydownTextCnahge() {
  keyUpDwwnLabel.textContent = "修飾キーを含むボタンが押されました。";
}

// ボタンを離した時の関数
function onkeyupTextCnahge() {
  keyUpDwwnLabel.textContent = "ボタンを離しました。";
}

// キャンセル時の関数
function keyUpDownTextCancel() {
  keyUpDownInput.value = '';
  keyUpDwwnLabel.textContent = keyUpDownCancelLabel;
}
出力結果

入力してください

onsubmit・onreset

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

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

onsubmit・onreset
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>イベントハンドラ(onsubmit・onreset)に関して</title>
  </head>

  <body>
    <label>未入力で送信ボタンを押してください。</label>
    <form
      onsubmit="validateForm()"
      onreset="alert('フォームがリセットされました');"
    >
      <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>
// 入力確認の関数
function validateForm() {
  var username = document.getElementById("username").value;
  if (username === "") {
    alert("ユーザー名を入力してください");
    return false; // フォームの送信をキャンセル
  }
  return true; // フォームの送信を許可
}
出力結果

oninput

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

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

  <body>
    <label id="oninput_label">何か入力してみてください。</label>
    <div id="oninput_output"></div>
    <div>
      <input
        id="oninput_input"
        type="text"
        oninput="oninputTextChange(this.value)"
      />
      <button onclick="oninputCancel()">キャンセル</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let oninputLabel = document.getElementById("oninput_label");
let oninputInput = document.getElementById("oninput_input");
let oninputOutput = document.getElementById("oninput_output");
let oninputCancelLabel = oninputLabel.textContent;

// 入力する時の関数
function oninputTextChange(value) {
  oninputOutput.textContent = value;
}

// キャンセル時の関数
function oninputCancel() {
  oninputInput.value = "";
  oninputOutput.textContent = "";
  oninputLabel.textContent = oninputCancelLabel;
}
出力結果
JavaScript
記事の内容
閉じる