これまで、JavaScriptでの要素の書き換えや追加などをご紹介しました。
【初心者向け】JavaScriptでHTMLの書き換え方法を解説！
【初心者向け】JavaScriptでHTMLの追加方法を解説！
今度は、ブラウザの画面で何かのアクションが発生した時に、こういった処理を実行できる「イベントハンドラ」について、
イベントハンドラとは
イベントハンドラの書き方
イベントリスナを使った書き方
をご紹介いたします。
イベントハンドラとは
ブラウザ上でのあるアクションがあった時に、指定した処理を行える仕組みのことです。
例えば、
- あるボタンを押したら、指定した文字が置き換わる。
とか
- キーボードのキーを押すと、文字数のカウンターが更新される。
などです。
みなさんが日常的にご覧になっているウェブサイトでも気づかないところで、このイベントハンドラが働いていて、ブラウザに様々な動きをさせているのです。
また、「あるイベント」と書きましたが、多くの種類があります。
| click | 要素がクリックされた時 |
| dblclick | 要素がダブルクリックされた時 |
| drag | 要素がドラッグされた時 |
| change | 要素の内容が変更された時 |
| keypress | キーボードのキーを押した時 |
| load | ページが読み込まれた時 |
| mouseover | 要素にマウスのカーソルが重なった時 |
| select | テキストなどを選択した時 |
| scroll | 画面がスクロールされた時 |
上記以外にもまだありますが、少しずつ覚えていけば大丈夫です。
イベントハンドラの書き方
HTMLで記述する際に、「イベント属性」を入れることでイベントを「発火」させることができます。
※イベントの処理を開始させることを「発火」という表現をよく使います。
例えば、インプットタグでボタンを作り、クリックでアラート画面を表示させるとします。
このように書きます。
この中の「onclick」が、先述したイベント属性です。
「イベント属性=”ここにJavaScriptの命令文を書きます。”」という書き方をします。
上記をHTMLの任意の場所に記述していただくと、「ボタン」と書かれたボタンができます。
そして、そのボタンを「クリック」することで「イベントが「発火」しました！」と書かれたアラート画面が出るはずです。
一度ご自身でお試しください。
イベントリスナを使った書き方
次はイベントリスナを使ってみましょう。
イベントリスナは「addEventListener()」というメソッドを使いますが、様々なイベント処理を実行させることができます。
まずは基本的な書き方をみていきましょう。
フォームの文字をカウントするイベントリスナの例です。
表示された文字入力フォームに実際に半角英数で文字を入力してみてください。
フォームの下の数字がカウントアップされます。
このように、イベントリスナを使用することで複雑なイベント処理を実現することが可能になります。
まとめ
今回はJavaScriptのイベントハンドラについて
イベントハンドラとは
イベントハンドラの書き方
イベントリスナを使った書き方
をご紹介いたしました。
ご紹介したのはあくまでも基本ですので、他にも多くの書き方があります。
HTMLにJavaScriptを組み込み際には必ず必要となるため、まずは基本を是非マスターしてください。
