LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@san_bay3(さんべい)

【JavaScript】addEventListenerを試してみた

Posted at

サマリ

JavaScriptのaddEventListenerについて、
クリック、マウスオーバー、送信、スクロールについて試しました。

実際の動作確認については下記のサイトを参考にさせていただきました。
ありがとうございました。
（以降、参考サイトと記述することにします。）

https://pikawaka.com/javascript/addeventlistener

背景

JavaScriptを勉強中なのですが、やっぱり自分でいろいろやってみないとわからないだろうと思ったのがきっかけです。

対象読者

  • addEventListenerを使ってみたい方
  • JavaScript初心者（自分含め）

前提

推奨：初歩的なHTML・CSS・JavaScriptの知識、テキストエディタ

実行環境

  • エディタ：VSCode version: 1.96.4(user setup)
  • ブラウザ：GoogleChromeバージョン: 134.0.6998.178（Official Build）

そもそも

そもそもaddEventListenerとは…ということで、
以下のサイト参照しました。

本記事においては実際に試すことに主軸を置いているため、
細かい部分については触れないことをご了承ください。
本当はもっと一つ一つ深く理解したいのですが・・

（当たり前ですが）MDNにも情報がまとまっています。

上記一つ目のサイトより、

addEventListener()は、JavaScriptでイベントリスナーを追加するためのメソッドです。イベントリスナーとは、特定のイベントが発生した際に呼び出される関数であり、ユーザーのアクションやWebページの状態の変化など、様々なイベントに対してリアクションを定義することができます。

何かイベント（クリック、マウスオーバー、キーの押下など）の発生をトリガーにリアクション（画面の変化など）を定義できますということですね。

実際にやってみようと思いますが
基本的な構文は以下のようです。

hoge.js
const element = document.querySelector("#xxx");
element.addEventListener(event, function, useCapture);

elementは任意の文字でOKです。
querySelector部分については、もちろんgetElementById("xxx")でもOKですが、
今はquerySelector("#xxx")の形が多いようなのでそのような記述をしています。
#xxx部分はhtmlファイルのid="xxx"に対応します。

  • eventは言わずもがなイベント（クリック、マウスオーバーなど）
  • functionはそのイベント受けてのリアクションを定義した関数
  • useCaptureはオプションの関数のようで自分のような初学者が早々に使う必要はなさそうなので今回は割愛とさせていただきます（おい

事前準備

VSCodeでindex.htmlファイルと、addEventListener.jsを同一フォルダに作っておきます。
（ファイル名はなんでもいいですが、今回はこのようにしました）
こんな感じです。
これらをそれぞれの項目に合わせて変えていきます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener</title>
    <script src="addEventListener.js" defer></script>
</head>
<body>
    <!-- ここに記載 -->
</body>
</html>

addEventListener.jsについては
以降、各項目に合わせて記載していきます。

クリック

まずは一番王道のクリックです。
ボタンをクリックするとアラートがポップアップされるというものです。
htmlはbody部分のみ抜粋します。

index.html
<body>
    <button id="testButton">ここをクリック</button>
</body>
addEventListener.js
const btn = document.querySelector("#testButton");
btn.addEventListener("click", () => {
    alert("クリックしましたね！");
});

image.png

無事クリックするとアラートが表示されました！

マウスオーバー

続いてマウスオーバーです。
特定の要素にマウスカーソルを持っていくと、それを契機に動作させるというものです。
今回は参考サイトにならい色を変えます。

<body>
    <div id="testHover">ここにマウスカーソルを乗せて下さい</div>
</body>

const hvr = document.querySelector("#testHover");
hvr.addEventListener("mouseover", () => {
    hvr.style.backgroundColor = "blue";
});

hvr.addEventListener("mouseout", () => {
    hvr.style.backgroundColor = "red";
});

id="testHover"要素にマウスを乗せたら青色、離したら赤色に変わります。
乗せるときと離したときそれぞれで動作の定義をします。
（細かいですが、乗せた時、離したとき、なので、乗せても離してもない一番最初は無色です。）

乗せたとき

image.png

離したとき

image.png

送信

次はフォームの送信です。
入力フォームにテキストを入れ、送信ボタンを押したらアラートが出るという挙動です。

index.html
<body>
    <form id="testForm">
        <input type="text" name="name" required>
        <button type="submit">送信</button>
    </form>
</body>
addEventListener.js
const frm = document.querySelector("#testForm");
frm.addEventListener("submit", (event) => {
    event.preventDefault();
    alert("送信されました");
});

image.png

画面のスクロール

画面をスクロールしたら特定の要素（ボタン）がでる挙動です。
こんなのもJavaScriptでできるんですね～！
これに関しては、cssがあったほうが良いため参考サイトにならい、cssを作成しました。

合わせてhtmlファイルにも反映するためhead内に以下のようにlink~の部分を追記します。

index.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener</title>
    <link rel="stylesheet" href="style.css"> <!-- 今回用に追記 -->
    <script src="addEventListener.js" defer></script>
</head>

<body>
    <div id="content">
        サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
    </div>
    <div id="backToTop">トップに戻る</div>
</body>
style.css
#content {
    height: 2000px;
  }
  
#backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    cursor: pointer;
  }
addEventListener.js
const backToTop = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    backToTop.style.display = 'block';
  } else {
    backToTop.style.display = 'none';
  }
});

backToTop.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

以下のように

image.png

上記が、

image.png

このように100px進んだところでトップに戻るボタンが出現しました。
（狂気のサンプルテキスト）

もちろん、トップに戻るボタンを押すと一番上に戻りました。

まとめ

addEventListenerの基本的な使い方について試せたかと思います。
コードの細かい部分の理解には及んでいないため、
今後も地道に学習を進めていきたいと思います。

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?