Google Maps API の addListener() に対応するのは removeListener() ではない

2014年12月12日 21:48 5267

この一連のツイートからしばらく経って気が付いたが、イベントリスナーを削除する方法として最初に挙げた例がそもそも間違っていた。JavaScript においてイベントターゲットからイベントリスナーを削除するには removeEventListener() というメソッドを用いるが、渡すべき引数はイベントリスナー追加時の返り値などではなく、イベントタイプとインターフェース、そしてキャプチャ開始のフラグ(useCapture)である。

たとえばこんな感じでイベントリスナーを追加したとする。

function testFunction() {
    alert('clicked!');
}

var testElement = document.getElementById('test');
testElement.addEventListener('click', testFunction, false);

これを削除するには、当該エレメントに対して removeEventListener() メソッドを呼び出す。引数は addEventListener() メソッドと基本的に同じである。

testElement.removeEventListener('click', testFunction, false);

ただこの場合、関数に引数を渡したい場合、記述がやや複雑になるのが難点。ブラウザ互換性を考えても jQuery を使うのが賢明だしかなり楽だと思う。

さて本題というか、Google Maps API v3 の話。マップにイベントリスナーを追加するには、addListener() メソッドを用いる。以下は変数 map にマップオブジェクト(のインスタンス)が割り当てられている場合の例。

google.maps.event.addListener(map, 'click', function() {
    alert('clicked!');
});

このイベントリスナーを削除する(上記の例ならマップ上をクリックしてもアラートが出ないようにする)には、clearListeners() メソッドを用いる。引数はインスタンス(マップやマーカー)とイベント名である。

google.maps.event.clearListeners(map, 'click');

ツイート中にも書いたが、clearListner ではなく clearListeners と複数形になっていることに注意。公式リファレンス にはこう書かれている。

Removes all listeners for the given event for the given instance