javascript - 使用addEventListener添加事件时如何传递数据？

问题描述

问 题

我想在DOM元素绑定事件时顺便能传一些值给回调函数；
我使用的方法是：

   function bindFunction(obj,fn,data){
      return function(){
        fn.apply(obj,[arguments,data]);
      }
    }

     function addEvent(element,type,fn,data,_this){
          _this = _this ? _this : element;
          if(element.addEventListener){
            element.addEventListener(type,bindFunction(_this,fn,data),false);
          }else if(element.attachEvent){
            element.attachEvent('on'+type,bindFunction(_this,fn,data));
          }else{
            element['on'+type] = fn.apply(_this,[arguments,data]);
          }
        }

这样可以实现参数的，但是在用到bindFunction函数时出现一个问题，就是他返回的是一个匿名函数，造成添加给dom元素的是一个匿名函数而不是那个函数名，这样就导致事件移除不了。
后来我想了一个解决方法就是在bindFunction函数中存储起这个匿名函数，移除时就能指定到了，于是改造了一下bindFunction这个函数，

   function bindFunction(obj,fn,data){
      return function(){
        fn['fn'] = arguments.callee;//用来存储当前匿名函数
        fn.apply(obj,[arguments,data]);
      }
    }

然后移除的时候我就可以

  function removeEvent(element,type,fn){
          if(element.removeEventListener){
            element.removeEventListener(type,fn['fn'],false);
          }else if(element.attachEvent){
            element.detachEvent('on'+type,fn['fn']);
          }else{
            element['on'+type] = null;
          }
        }

这样似乎可以解决掉问题，不过总感觉这种方法好像不是很好，还有什么好的方法进行传数据的吗，在绑定事件时。

解决方案

我觉得这样可能更简单一些，绑定事件时返回一个用来解绑的函数，需要解绑时就直接调用它，就可以了。

function addEvent(element,type,fn,data,_this){
    _this = _this ? _this : element;
    var bound = bindFunction(_this,fn,data);
    if(element.addEventListener){
        element.addEventListener(type,bound,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,bound);
    }else{
        element['on'+type] = fn.apply(_this,[arguments,data]);
    }
    return function(){
        if(element.removeEventListener){
            element.removeEventListener(type,bound,false);
        }else if(element.attachEvent){
            element.detachEvent('on'+type,bound);
        }else{
            element['on'+type] = null;
        }
    };
}

//绑定
var unbinder = addEvent(/*此处省略*/);

//解除上面的绑定
unbinder();

这篇关于javascript - 使用addEventListener添加事件时如何传递数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！