見出し画像

JavaScriptのイベント処理

とうふ

JavaScriptを学習していて初めてJavaScriptを使っているなと感じたのがイベント処理。今回は、自分のイベント処理の学習についてまとめます。


学習方法

私がJavascriptのイベントを学習した教材は、以前記事にした「1冊ですべて身につくJavascript入門講座」です。

まずは、この書籍でイベントの仕組み、イベントの種類、イベントリスナーの基本を学習しました。あとは実際にWebサイトやWebアプリを作りながら使い方を学んでいます。
他にもJavascriptの書籍を読んだりしていますが、別の機会で記事にしたいと思います。

イベントの処理について

ブラウザでは、クリックしたりスクロールしたり、入力したりなど様々なイベントが発生します。そういったイベントが発生した際に、そのイベントを検知し処理を行う仕組みがJavascriptには備わっています。
そこに、行いたい処理の内容を登録し、イベントが発生するたびに処理を実行する、といった流れになります。

よく利用するイベントの種類

イベントの種類は多くありますが、ここではよく使うイベントを紹介します。

  • load：すべてのリソースの読み込みが完了したとき

  • submit：フォームが送信されるとき

  • scroll：画面がスクロールされたとき

  • click：クリックされたとき

  • select：テキストを選択したとき

  • input：入力されたとき

  • change：変化があったとき

イベントの登録

上記のイベントが発生したときに行う処理の内容を登録するときのに用いるメソッドが「addEventListener()」です。

addEventlistener( イベントの種類 , 処理の内容)

引数には、イベントの種類と処理の内容を入力します。
文字通りイベントリスナーを追加するメソッドなので、上記の構文をHTMLのエレメントに対して指定することで、そのエレメントにイベントが登録されます。エレメントの指定には、以前記事にした「getElementById()」などを使います。

<html>
<heaとｐ
 <title>example</title>
</head>
<body>

 <button id="btn">クリックしてください</button>

 <script>

  const btn = document.getElementById("btn");
  btn.addEventListener('click', () => {
    console.log("クリックされました")
  });

  <!-- クリックしたときの出力結果　→　クリックされました -->

 </script>
</body>
</html>

処理する内容について

addEventListener()メソッドの第2引数で処理する内容を登録します。
内容は関数で入力することでより複雑な処理を登録することができます。
上の例では、アロー関数を用いて記述しました。

実際に使ってみて

基本的な学習が終わったあとに、実際に自分で適当なアプリを作りながら使って思ったことをまとめました

アニメーションと組み合わせると実用的

ユーザーが画面を操作するとき、様々なイベントが発生します。そのイベントに対してアニメーションを登録することで、動きのあるWebサイトが作れるようになります。

イベントリスナーの重複に注意

実際に簡単な日記アプリを作ってみたときに、更新時のイベントを設定した時にボタンを押すたびにイベントの処理操作が変わってしまうことがありました。イベントを検知するたびに実行されるので、処理される内容をうまく設定しないと処理の内容がそのタイミングによって異なる挙動を示すことがあるので注意が必要だと思いました。

JavaScriptの仕様

実際に使ってみるとJavascriptの仕様についての学ぶことが多くありました。イベントの検知やイベントの処理の挙動もそうですが、読み込みのタイミングなども理解しないといけないため、使いながらいろいろと理解が深まります。また、thisの扱いや、クラスを扱う際のイベントの束縛なども重要になってきます。もっと深く学習した時に記事にしたいと思います。


今回は、Javascriptのイベント処理について記事にしました。
今後もいろいろな開発を通して、より理解を深めていきたいと思います。
最後までご愛読ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？