【JS】イベント ～ 入門編 ～

JavaScript

■ はじめに

JavaScript の イベントについて扱う

目次

【１】イベントの種類
　１）基本的なイベント
　２）入力イベント
【２】イベントの追加方法

【１】イベントの種類

１）基本的なイベント

[1] click 

* Click イベント

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

[2] blur 

* フォーカスが外れた時に発生

cf. blur(ブラー) = ぼやけさせる、不鮮明にする

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/blur

[3] focus 

* フォーカスが当たった時に発生

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus

２）入力イベント

[1] input 

* 値 (value) が変更されたときに発生

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event

【２】イベントの追加方法

* addEventListener('<event>', <Event後の処理>)で追加

１）サンプル

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<button id="btn1">Click me!!</button>
<p class="p1">Click : 0</div>
</body>
<script>
var index = 0;
const button = document.querySelector('#btn1');
button.addEventListener('click', function(event) {
  index = index + 1;
  const result = document.querySelector('.p1');
  result.innerHTML = `Click : ${index}`;
});
</script>
<html>

参考文献

https://phpjavascriptroom.com/?t=js&p=event
https://www.hypertextcandy.com/vanilla-javascript-event

関連記事

DOM ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2011/01/07/012520