7cc@はてなブログ

JavaScriptとかとか

【IE8でも】無名関数をremoveEventLitener

IE9以降(=addEventListenerが使える)ならhandleEventで出来るので不要。
IE8も含めた場合。
名前をつければいいだけなので無名関数をremoveEventLitenerしたい時なんてあるのか疑問ですが。

方法

イベントリスナを適当なオブジェクトに入れるだけ。
要は関数式。

コード

var doc = document
  , sup = doc.addEventListener
  , add = sup ? 'addEventListener' : 'attachEvent'
  , rem = sup ? 'removeEventListener' : 'detachEvent'
  , pre = sup ? '' : 'on'

// ここにコールバックを保存する
var listenerStock = {}

function addEvent(node, type, fn, stock) {
  if ( stock && !listenerStock[fn] ) { // ストックしてなかったらストック
    listenerStock[fn] = fn
  }
  else if ( stock && listenerStock[fn] ) { //  ストックしてたらそれを使う
    fn = listenerStock[fn]
  }
  node[add](pre + type, fn, false)
}

function remEvent(node, type, fn) {
  listenerStock[fn] && ( fn = listenerStock[fn] )
  node[rem](pre + type, fn, false)
}

usage

addEvent(document, "click", function(){
  console.log(1)
}, true) // 第三引数でストックするか決める

remEvent(document, "click", function(){
  console.log(1)
})

でも直接
listenerStock[function(){}] = function(){}
としたほうがいいかもしれない。基本的に無名関数は渡さないようにした方が良い。