javascript イベントの書き方使い方まとめ

2014-08-11

Pocket

フォームのバリデーションやボタンを押したときの処理など、イベント関連の操作は基本的な処理になっています。javascriptではイベントの受付やイベントの発動条件の設定などができるので、ここで簡単にまとめておきたいと思います。

javascriptのイベント処理の基本

イベントの流れ

イベントの流れは大まかに書くと以下の通り。

イベントの受付：ボタンのクリックなど
関数の呼び出し：イベントと結びつけられた関数を呼び出し
関数の処理：必要な処理の実行
表示など

まずはイベントハンドラやイベントリスナーを設定して、特定のノード（classやtag）でイベント（クリックや来ボード操作など）を受け付けます。

その後設定した関数を呼び出して処理を行うというのが基本的な流れ。

イベントを受付、発動させる方法

ブラウザ上でイベントが発生したときに、そのイベントを受け付けるにはイベントハンドラを設定します。書き方はいくつか種類があってどれを使ってもOK。ただ、HTMLに直接書き込むのはバッドプラクティスとなっているので注意。

その悪い例がこちら。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic EVENT</title>
</head>
<body>
    <h1>EVENT</h1>

    <button onclick="clicked()">click me!</button>

    <script src="js/basic-event.js"></script>
</body>
</html>

javascript

function clicked(){
    alert('Clicked');
}

一見よくある書き方っぽいですが、CSSでも言われてるようにタグに直接スタイルを書き込むのは基本的にNG。それと同じ感じです。

タグに直接書き込まずjavascriptファイルとHTMLを分離する必要があるので、同じ処理でも以下のように書くとよいです。注意点はイベント名にonをつけること。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic EVENT</title>
</head>
<body>
    <h1>EVENT</h1>
    
    <!-- Bad Practice -->
    <button onclick="clicked()">click me!</button>

    <!-- Good Practice -->
    <button id="good">I am Good!</button>

    <script src="js/basic-event.js"></script>
</body>
</html>

javascript

function clicked(){
    alert('Clicked');
}

var element = document.getElementById('good');
element.onclick = clicked;

もう一つの書き方はイベントリスナー。こちらは最近使われるようになった書き方。addEventListener()の()内にイベント名と関数名を記述すれば使えます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic EVENT</title>
</head>
<body>
    <h1>EVENT</h1>

    <!-- Event Listener -->
    <button id="listener">Listener</button>


    <script src="js/basic-event.js"></script>
</body>
</html>

javascript

function clicked(){
    alert('Clicked');
}


var element = document.getElementById('listener');
element.addEventListener('click' , clicked);

イベントのtargetを取得する方法

上記のサンプルではアラートを表示するだけなので問題ないのですが、処理によってはクリックしたところの要素を必要とする場合もあります。

そんなときに使うのがtarget。これを使えばイベントが発生した要素を簡単に取得できます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic EVENT</title>
</head>
<body>
    <h1>EVENT</h1>

    <!-- Event Listener -->
    <button id="listener">変更する</button>


    <script src="js/basic-event.js"></script>
</body>
</html>

javascript

function changeText(e){

    // targetをセット
    var element = e.target;

    if(!(element.className == 'changed')){

        // classにchangedを追加
        element.className = 'changed';

        element.textContent = '変更完了!';

    }else{

        // classを削除
        element.removeAttribute('class');

        element.textContent = '変更する';
    }
}


var element = document.getElementById('listener');
element.addEventListener('click' , changeText);

ここではクリックするごとにボタンのテキストを変更しています。イベントリスナーのほうは先ほどと同じ。関数についている(e)がイベントオブジェクトで、e.targetと書くことでイベント発生時の要素を取得可能。このオブジェクトにはtargetの他にもイベントのタイプなどのプロパティがあります。