addEventListener：mx-Lab：SSブログ

	ブログをはじめるログイン

detachEvent｜removeEventListener ブログトップ

addEventListener　[JavaScript] [編集]

◆object.addEventListener メソッド

object.addEventListener(event, function, capture)

これがなくちゃ JavaScript が始まらない、イベントハンドラの登録メソッド。

主要なブラウザの中では、Firefox、Safari、Google Chrome が対応しています。

Internet Explorer 8、Opera は対応していません（これらのブラウザでは、attachEvent メソッドを使います）。

組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドで、イベントハンドラの登録に使います。

第一引数 event はイベント名文字列（プレフィックスに 'on' を含まない）、第二引数 function は実行するイベントハンドラメソッド、第三引数 capture はキャプチャー（Boolean 型）です。

第一引数と第二引数は attachEvent メソッドとほぼ同じとして、第三引数のキャプチャーがおもしろいです。

こんなソースを書きました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>addEventListener</title>
    <script type="text/javascript" >
        //<![CDATA[

        var strEventOrder = '';

        function alertEventOrder(evt) {
            alert(window.strEventOrder);
        }

        function resetEventOrder(evt) {
            window.strEventOrder = '';
        }

        function addEventOrder(intOrder) {
            if (window.strEventOrder != '') window.strEventOrder = window.strEventOrder + ', ';
            window.strEventOrder = window.strEventOrder + String(intOrder);
        }

        function eventRed(evt) {
            alert('Event Red.');
        }

        function eventGreen(evt) {
            alert('Event Green.');
        }

        function eventBlue(evt) {
            alert('Event Blue.');
        }

        //]]>
    </script>
</head>
<body>
    <input id="Button1" type="button" value="イベント発生" />
    <input id="Button2" type="button" value="イベント順表示" />
    <input id="Button3" type="button" value="イベント順リセット" />
    <div id="id_div_a_red" style="margin: 20px; border: 1px solid Black; background-color: Red;">
        <div id="id_div_a_green" style="margin: 20px; border: 1px solid Black; background-color: Green;">
            <div id="id_div_a_blue" style="margin: 20px; border: 1px solid Black; background-color: Blue;">
                <br /><br />
            </div>
        </div>
    </div>
    <div id="id_div_b_red" style="margin: 20px; border: 1px solid Black; background-color: Red;">
        <div id="id_div_b_green" style="margin: 20px; border: 1px solid Black; background-color: Green;">
            <div id="id_div_b_blue" style="margin: 20px; border: 1px solid Black; background-color: Blue;">
                <br /><br />
            </div>
        </div>
    </div>
</body>
    <script type="text/javascript" >
        //<![CDATA[

        var elm;

        elm = document.getElementById('Button1');
        elm.addEventListener('click', function () { addEventOrder(1) }, false);
        elm.addEventListener('click', function () { addEventOrder(2) }, false);
        elm.addEventListener('click', function () { addEventOrder(3) }, false);
        elm.addEventListener('click', function () { addEventOrder(4) }, false);
        elm.addEventListener('click', function () { addEventOrder(5) }, false);
        elm.addEventListener('click', function () { addEventOrder(6) }, false);
        elm.addEventListener('click', function () { addEventOrder(7) }, false);
        elm.addEventListener('click', function () { addEventOrder(8) }, false);
        elm.addEventListener('click', function () { addEventOrder(9) }, false);
        elm.addEventListener('click', function () { addEventOrder(10) }, false);

        elm = document.getElementById('Button2');
        elm.addEventListener('click', function () { alertEventOrder() }, false);

        elm = document.getElementById('Button3');
        elm.addEventListener('click', function () { resetEventOrder() }, false);

        elm = document.getElementById('id_div_a_red');
        elm.addEventListener('click', eventRed, false);

        elm = document.getElementById('id_div_a_green');
        elm.addEventListener('click', eventGreen, false);

        elm = document.getElementById('id_div_a_blue');
        elm.addEventListener('click', eventBlue, false);

        elm = document.getElementById('id_div_b_red');
        elm.addEventListener('click', eventRed, true);

        elm = document.getElementById('id_div_b_green');
        elm.addEventListener('click', eventGreen, true);

        elm = document.getElementById('id_div_b_blue');
        elm.addEventListener('click', eventBlue, false);

        //]]>
    </script>
</html>

イベントハンドラの実行順序の確認も兼ねていますが、Firefox、Safari、Google Chrome ともに、しっかりイベントハンドラを登録した順番で実行してくれます。

つまり、イベントハンドラの実行順序がややこしいのは、主要なブラウザの中では、Internet Explorer 8 だけということになります。

問題のキャプチャーについてです。

このサンプルソースでは、body 直下にふたつの <div> ブロックを持っています。

いずれも入れ子で <div> ブロックを持っていて、外側から順番に背景色が Red、Green、Blue になっています。

これらのブロックは、各々 onclick イベントで、それぞれ eventRed、eventGreen、eventBlue イベントハンドラが起動するよう、addEventListener で登録しています。

ひとつめの <div> ブロックでは、イベントハンドラの登録でキャプチャーを false にしています（キャプチャーを使わない）。

このとき、イベントハンドラは、もっとも内側の要素から、もっとも外側の要素に向けて、順番に実行されます。

つまり、ひとつめの <div> ブロック内の Blue ブロックをクリックすると、Blue → Green → Red の順番で、イベントハンドラが起動します。

一方、ふたつめの <div> ブロックでは、最初に Red のイベントハンドラをキャプチャー true で登録し、次に Green のイベントハンドラをキャプチャー true で登録し、最後に Blue のイベントハンドラをキャプチャー false で登録しています。

ここで、ふたつめの <div> ブロック内の Blue ブロックをクリックすると、先程とは異なり、Red → Green → Blue の順番で、イベントハンドラが起動します。

それでは、Red と Green のイベントハンドラの登録の順番を変えると、どうなるか？

それでも、実行順序は Red → Green → Blue のままでした。

この挙動は、Firefox、Safari、Google Chrome ともに同じです。

う～ん、登録順は関係ないんか。

よくわかんねえ。

とりあえず、これだけは確かなようです。

キャプチャー true で addEventListener されたイベントハンドラは、キャプチャー false で addEventListener されたイベントハンドラより、先に実行される。

もっとも JavaScript は、どのブラウザでも同様の挙動をするように実装するのが当たり前ですから、イベントのキャプチャーに対応していない Internet Explorer 8 や Opera に配慮して、イベントのキャプチャーをマストとするような実装は、あまりしないんじゃないかと思います。

今回も、一応「備忘録」ということで。