addEventListenerで渡した無名関数の中でremoveEventListenerする

最近は、onload属性やonclick属性に無名関数を渡すやり方ではなく、なるべくaddEventListenerを使うようにしている。

<script type="text/javascript">
window.addEventListener('load', function(){
    document.getElementById('button1').addEventListener('click', function(){
        alert('hello, world!');
    }, false);
}, false);
</script>
<button type="button" id="button1">hello</button>

こんな感じ。

そして、一度セットした関数を削除したいことがある。addEventListenerでセットした関数を削除するには、removeEventListenerを使う。

名前を付けた関数を作っていれば、これは簡単に書ける。

<script type="text/javascript">
window.addEventListener('load', function(){
    document.getElementById('button1').addEventListener('click', hoge, false); // ここでadd
}, false);

function hoge(){
    alert('hello, world!');
    document.getElementById('button1').removeEventListener('click', hoge, false); // ここでremove
}
</script>
<button type="button" id="button1">hello</button>

addのときもremoveのときも、hogeという関数を渡せば良い。

しかし、冒頭の例のように無名関数を使っていると、関数に名前が無いからこれが書けない。

<script type="text/javascript">
window.addEventListener('load', function(){
    document.getElementById('button1').addEventListener('click', function(){
        alert('hello, world!');
        document.getElementById('button1').removeEventListener('click', /* ここが書けない */, false);
    }, false);
}, false);
</script>
<button type="button" id="button1">hello</button>

で、調べてみたら、以下の話を見つけた。

• http://un-q.net/2007/07/addeventlistener_removeeventlistener.html

なるほど、arguments.calleeを使えるのか。

・・・といっても上記のURLではActionScriptの話をしてる。まあJavaScriptでも同じだろうと思ってさっそくやってみた。

<script type="text/javascript">
window.addEventListener('load', function(){
    document.getElementById('button1').addEventListener('click', function(){
        alert('hello, world!');
        document.getElementById('button1').removeEventListener('click', arguments.callee, false);
    }, false);
}, false);
</script>
<button type="button" id="button1">hello</button>

うん、バッチリだった。Firefox2では。