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要素として描いた場合、イベントが認識されるのは色がついているところだけです。