ゼロから始めるJavaScript講座Vol17 DOM操作〜イベントハンドラ〜



ゼロから始めるJavaScript講座Vol17 DOM操作〜イベントハンドラ〜
目次
  1. ゼロから始めるJavaScript講座DOM操作イベントハンドラ
  2. イベントハンドラ

ゼロから始めるJavaScript講座DOM操作イベントハンドラ

イベントハンドラ

「マウスでボタンをクリック」「キーボードのキーを押す」など、Webページに対する動作や操作のことをイベントと呼びます。

JavaScriptではこのようなイベントを監視し、実際にイベントが発生した際に特定の処理を命令することができます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントハンドラ</title>
</head>
<body>
    <button id="alert">アラート</button>
    <script>
        function event_alert(){
            alert("ボタンが押されました");
        }
        var button = document.getElementById("alert");
        button.addEventListener("click", event_alert, false);
    </script>
</body>
</html>

javascript-event1-639

ボタンをクリックすると、アラートが表示されます。これはJavaScriptで「ボタンをクリック」というイベントを監視しており、クリックというイベントが発生した際に、アラート実行という処理を行っています。

このようにイベントを検知し、それに対し処理を与えるための命令をイベントハンドラと呼びます。

javascript-event2-639

DOMで取得した要素に対してaddEventListenerメソッドを利用すると、その要素に対するイベントを監視し、イベントが実行された時にlistnerで指定した処理を実行できます。

javascript-event3-639

今回はbutton要素[button要素[id=”alert”]clickクリックevent_alert関数

イベントに関する一連の処理をまとめると以下のようになります。

javascript-event4-639

今回はclickイベントでしたが、その他イベントでも基本的に同じ流れとなります。

イベントの種類は多数あります。addEventListenerメソッドで検知できるイベントの一部を紹介します。

addEventListenerメソッドで検知できるイベント

実際にaddEventListenerメソッドの引数に指定するイベント名をclickからmouseoverに変更すると、ボタンの上にマウスカーソルを重ねるだけでアラートが表示されます。

javascript-event5-639

イベント処理はJavaScriptで非常によく利用される仕組みですので、しっかりと理解しておきましょう。

NEXTLESSONDOM操作イベントの実行タイミングDOM操作イベントの実行タイミング

PREVLESSONDOM操作DOM操作

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp