js 有没有办法 判断一个dom元素是否已经绑定了某个事件？？

Question

问题在代码里面，请耐心观看，有劳了，谢谢。

var div = document.getElementById('div');
logEvent('click' , div , false , false , function(){
  console.log('数据测试！');
});
/*
    @param   HTMLElement  ele             绑定事件的元素
    @param   String       eventType       事件类型
    @param   Boolean      isCaptureCatch  是否在捕获阶段触发 
    @param   Boolean      isRepeat        是否允许同类型事件重复绑定
    @param   Function     fn              事件绑定的函数
    @return undefined
*/
function loginEvent(ele , evenType , isCaptureCatch , isRepeat , fn){
  // 一个分支： isRepeat = false 的时候 
  // 我就需要先判断该事件上是否已经绑定了同类型事件（不允许同一元素上重复绑定同一类型事件）
  if (!isRepeat) {
     /* 
       * 判断一个元素上是否已绑定某事件
       * 这个 container 函数怎么实现？？求大神指教
     */
     if (!container(ele , eventType)) {
        // 未绑定，所以绑定事件
        ele.addEventListener(eventType , fn , isCaptureCatch);
     }
  }
}

该问题已解决，贴出解决后的代码分享下哈：-----------------------------

/*
   * 事件注册
   * @param Element     ele 
   * @param String      eventType
   * @param Function    fn
   * @param Boolean     isRepeat
   * @param Boolean     isCaptureCatch
   * @return undefined
*/
function loginEvent(ele , eventType , fn , isRepeat , isCaptureCatch){
   if (ele == undefined || eventType === undefined || fn === undefined) {
     throw new Error('传入的参数错误！');
   }

   if (typeof ele !== 'object') {
     throw new TypeError('不是对象！');
   }

   if (typeof eventType !== 'string') {
     throw new TypeError('事件类型错误！');
   }

   if (typeof fn !== 'function') {
     throw new TypeError('fn 不是函数！');
   }

   if (isCaptureCatch === undefined || typeof isCaptureCatch !== 'boolean') {
     isCaptureCatch = false;
   }

   if (isRepeat === undefined || typeof isRepeat !== 'boolean') {
     isRepeat = true; 
   }

   if (ele.eventList === undefined) {
     ele.eventList = {};
   }

   if (isRepeat === false) {
     for (var key in ele.eventList)
      {
        if (key === eventType) {
          return '该事件已经绑定过！';
        }
      }
   }
   
   // 添加事件监听
   if (ele.addEventListener) {
     ele.addEventListener(eventType , fn , isCaptureCatch);
   } else if (ele.attachEvent) {
     ele.attachEvent('on' + eventType , fn);
   } else {
     return false;
   }

   ele.eventList[eventType] = true;
}

Answer 1

据我所知原生的不好弄，jq的实现其实很简单。

jq的事件都是事件委托，所有的事件都被它存了起来，判断某元素是否绑定了某事件，只需要在事件堆栈里面查询一遍就知道了。

Answer 2

用原生的，确实比较痛苦。不能判断是否已经绑定，但是如果处理函数（对象）未变的话，是可以 remove 的，用 removeEventListener。

我还是建议你用 jQuery。jQuery 在删除事件的时候不需要提供原处理函数，而且可以删除所有的某个事件，或者部分某个事件处理函数，比如

$dom.on("click", handler1)
    .on("click.amark", handler2);
    
// 删除标记为 amark 的 click 事件处理函数，也就是 handler2
$dom.off("click.amark")

// 删除所有 click 事件处理函数，也就是 handler1 和 handler2
$dom.off("click");

Answer 3

//jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件
var $events = $("#testdiv").data("events");
if( $events && $events["click"] ){
　　// 绑定
}else{
   // 未绑定
}

Answer 4

如果是原生绑定的事件，需要使用插件。
http://stackoverflow.com/ques...

Answer 5

var decorator = function(input, fn) {
    var input = document.getElementById(input);
    if (typeof input.onclick === 'function') {
        var oldClickFn = input.onclick;
        input.onclick = function() {
            oldClickFn();
            fn();
        }
    } else {
        input.onclick = fn;
    }
}

Answer 6

原生的：window.getEventListeners($('#abc')[0])
或者
jQuery的：$._data($('#abc')[0], 'events');

上面两种方法可以得到所有的绑定事件啊互助，可以看有没有click的