JavaScriptのイベント処理を理解しよう

イベント処理とはユーザーの操作に応じて処理を実行する仕組みです。
代表的なのはクリック、入力、ホバー(マウスオーバー)、スクロールなどです。
まずはクリックから始めると理解しやすいです。
イベント処理はWebの動きの中心になるため優先して習得したい部分です。

クリック時の処理を書いてみよう

ボタンを押したら文字を変える、画像を切り替えるなど、まずは簡単な内容で動作を確認しながら練習するのがポイントです。

See the Pen イベント処理の基礎(クリック・入力) by Syo Yanai (@h1-tech-japan) on CodePen.

便利なイベントの種類

changeはフォーム入力の変更時、inputは文字入力のたびに発火するイベントです。
慣れてきたらイベントリスナーを使う書き方に切り替えるとスマートなコードになります。
イベント名を覚えるより「ユーザーのどんな行動を拾いたいか」を意識すると失敗しません。