これまで、JavaScriptでの要素の書き換えや追加などをご紹介しました。
【初心者向け】JavaScriptでHTMLの書き換え方法を解説！
【初心者向け】JavaScriptでHTMLの追加方法を解説！
今度は、ブラウザの画面で何かのアクションが発生した時に、こういった処理を実行できる「イベントハンドラ」について、
イベントハンドラとは
イベントハンドラの書き方
イベントリスナを使った書き方
をご紹介いたします。
イベントハンドラとは
ブラウザ上でのあるアクションがあった時に、指定した処理を行える仕組みのことです。
例えば、
- あるボタンを押したら、指定した文字が置き換わる。
とか
- キーボードのキーを押すと、文字数のカウンターが更新される。
などです。
みなさんが日常的にご覧になっているウェブサイトでも気づかないところで、このイベントハンドラが働いていて、ブラウザに様々な動きをさせているのです。
また、「あるイベント」と書きましたが、多くの種類があります。
| click | 要素がクリックされた時 |
| dblclick | 要素がダブルクリックされた時 |
| drag | 要素がドラッグされた時 |
| change | 要素の内容が変更された時 |
| keypress | キーボードのキーを押した時 |
| load | ページが読み込まれた時 |
| mouseover | 要素にマウスのカーソルが重なった時 |
| select | テキストなどを選択した時 |
| scroll | 画面がスクロールされた時 |
上記以外にもまだありますが、少しずつ覚えていけば大丈夫です。
イベントハンドラの書き方
HTMLで記述する際に、「イベント属性」を入れることでイベントを「発火」させることができます。
※イベントの処理を開始させることを「発火」という表現をよく使います。
例えば、インプットタグでボタンを作り、クリックでアラート画面を表示させるとします。
|
1 |
<input type="button" value="ボタン" onclick="window.alert('イベントが「発火」しました！')"> |
このように書きます。
この中の「onclick」が、先述したイベント属性です。
「イベント属性=”ここにJavaScriptの命令文を書きます。”」という書き方をします。
上記をHTMLの任意の場所に記述していただくと、「ボタン」と書かれたボタンができます。
そして、そのボタンを「クリック」することで「イベントが「発火」しました！」と書かれたアラート画面が出るはずです。
一度ご自身でお試しください。
イベントリスナを使った書き方
次はイベントリスナを使ってみましょう。
イベントリスナは「addEventListener()」というメソッドを使いますが、様々なイベント処理を実行させることができます。
まずは基本的な書き方をみていきましょう。
|
1 |
イベントを設定する要素.addEventListener( イベントの種類, 関数 ) |
フォームの文字をカウントするイベントリスナの例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<body> <p>文字数をカウンター</p> <input type="text"class="text"/> <p id="counter">0</p> <script type="text/javascript"> // inputフォームの要素を変数nodeに格納します。 let node = document.querySelector(".text"); // id="counter"の要素（文字数を表示する要素）を格納します。 let counter = document.getElementById("counter"); // ここからがイベントリスナ。 // イベントは"keyup"を使用しますので、文字を打つたびに処理されます。 node.addEventListener("keyup", function () { // inputフォームの文字数を変数countに格納します。 let count = node.value.length; // id="counter"の要素のテキスト文字をinputフォームの文字数に置き換えます。 counter.innerText = count; }); </script> </body> |
表示された文字入力フォームに実際に半角英数で文字を入力してみてください。
フォームの下の数字がカウントアップされます。
このように、イベントリスナを使用することで複雑なイベント処理を実現することが可能になります。
まとめ
今回はJavaScriptのイベントハンドラについて
イベントハンドラとは
イベントハンドラの書き方
イベントリスナを使った書き方
をご紹介いたしました。
ご紹介したのはあくまでも基本ですので、他にも多くの書き方があります。
HTMLにJavaScriptを組み込み際には必ず必要となるため、まずは基本を是非マスターしてください。
