Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

76
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】addEventListenerの使い方

Last updated at Posted at 2021-01-11

#プログラミング勉強日記
2021年1月11日
今日はaddEventListenerの使い方を簡単にまとめる。

#addEventListenerとは
 マウスによるクリックやキーボードからの入力といった様々なイベント処理を実行するメソッド。
 一般的な書き方は、イベントの種類と実行するための関数を指定する。第1引数にイベントの種類、第2引数に関数、第3引数にイベント伝搬の方式をtrueかfalseで指定する。第3引数は通常はfalseを指定する。

基本的な書き方
対象の要素.addEventListener(種類, 関数, false);

##外部の関数を設定する
 関数をイベント処理の外側で定義する。関数内の処理が複雑な場合やファイルが複数に分かれている場合に使われる。

対象の要素.addEventListener(種類, 関数, false);

function sample() {
  // 処理を記述
}

##無名関数を設定する
 一般的に使われる方法で、第2引数にそのまま関数を記述する。単純な処理を記述する場合によく使われる。

対象の要素.addEventListener(種類, function() {
  // 処理を記述
}, false);

##アロー関数を設定
 無名関数をES2015の書き方にしたパターンである。

対象の要素.addEventListener(種類, () => {
  // 処理を記述
});

#イベントの種類

イベント種類 内容
load Webページの読み込みが完了したとき(画像などのリソースすべて含む)
DOMContentLoaded Webページが読み込みが完了したとき(画像などのリソースは含まない)
click マウスボタンをクリックしたとき
mousedown マウスボタンを押しているとき
mouseup マウスボタンを離したとき
mousemove マウスカーソルが移動したとき
keydown キーボードのキーを押したとき
keyup キーボードのキーを離したとき
keypress キーボードのキーを押しているとき
change フォーム部品の状態が変更されたとき 
submmit フォームのsubmitボタンを押したとき
scroll 画面がスクロールしたとき

#サンプルコード
 クリックイベント処理の簡単なサンプルコード

<!DOCTYPE html>
<html>
  <body>
 
    <h1 id = "idName">クリック前</h1>
    <button id = "btn">クリック</button>
 
    <script>
	  var btn = document.getElementById('btn');
 
	  btn.addEventListener('click', function() {
		var mydiv = document.getElementById("idName");

		mydiv.innerHTML = "クリック後";
  
      }, false);
    </script>
 
  </body>
</html>

実行結果
image.pngimage.png

#参考文献
【JavaScript】addEventListenerで関数に引数をわたす
【JavaScript入門】addEventListener()によるイベント処理の使い方!

76
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?