EventTarget.addEventListener()

addEventListener()はイベントを処理するためのイベントリスナーを追加します。
このメソッドの典型的な書式は次の通りです。を使います。

addEventListener()は次の書式で使います。


  target.addEventListener(type, listener [, options]);
  

typeはイベントの種類、listenerはイベントを待ち受ける関数(イベントリスナー)の名前、optionsは省略可能なオプションです。 ただし、addEventListener()の第3引数は、以前の仕様では論理値を指定することになっていたので、 falseを指定しておきます(新しいバージョンのWebブラウザだけを対象とする場合は省略できます)。

これを使って、たとえば、targetオブジェクトのclickイベントでonClick()を呼び出せるようにしたいときには、次のようにします。


  target.addEventListener('click', onClick, false);
  

次の例は、ユーザーが「ここをクリックしてごらん。」をクリックするとテキストが「クリックされました。」になるようしたコードの例です。


  <p id="para">ここをクリックしてごらん。</p>
  <script type="application/javascript">
    var para = document.getElementById("para");
    para.addEventListener('click', onClick, false);
    function onClick(e) {
      para.innerText = "クリックされました。";
    }
  </script>  
  

「ここをクリックしてごらん。」をクリックするとテキストが「クリックされました。」になります。

ここをクリックしてごらん。

次の例は、ユーザーがSVG図形をクリックするたびにSVG図形の幅が2倍になるようにしたコードの例です。


    <svg id="svg1" width="400" height="140">
    <rect id="rect1" x="20" y="10" width="50" height="100" stroke="blue" stroke-width="2" fill="blue" />
  </svg>
  <script type="text/javascript">
    var rect1 = document.getElementById("rect1");
    // イベントリスナーにイベントを登録する
    rect1.addEventListener("click", function () {
      var w = rect1.getAttribute("width");
      var ws = (w * 2);
      rect1.setAttribute("width", ws);
    }, false);
  </script>
  

実行すると四角形が表示されて、ユーザーが四角形をクリックするたびに幅が2倍になります。

このイベント処理で注意しなければならないのは、SVG図形が描かれていない場所はイベントを認識しないという点です。 たとえば、上のように塗り潰した四角形をSVG要素として描いた場合、イベントが認識されるのは色がついているところだけです。


関連項目


HTML目次 inserted by FC2 system