javascript实现简单的on事件绑定

实现一个简单的on和off方法

介绍:

Event对象:

funcList: {},//保存delegate所绑定的方法 ieFuncList :{} //保存ie下的绑定方法

Event 对象中的 on,off 方法,主要调用 Event.addEvent,Event.delegateHandle这两个方法

Event.addEvent: 调用底层的addEventListener添加监听事件 Event.delegateHandle: 当发生事件之后,随着事件的冒泡上升,判断存在事件委托的元素,并执行对应的回调函数

addEvent / offEvent:

obj.addEventListener(type,fn,false); obj.removeEventListener(type,false);

代码-Event.js

funcList: {},//保存delegate所绑定的方法
ieFuncList: {},//由于保存在ie下绑定的方法

on: function(obj,selector,type,fn) {
if (!obj || !selector) return false;
var fnNew = Event.delegateHandle(obj,fn);
Event.addEvent(obj,fnNew);
/ 将绑定的方法存入Event.funcList，以便之后解绑操作 /
if (!Event.funcList[selector]) {
Event.funcList[selector] = {};
}
if (!Event.funcList[selector][type]) {
Event.funcList[selector][type] = {};
}

Event.funcList[selector][type][fn] = fnNew;

},off: function(obj,fn) {
if (!obj || !selector || !Event.funcList[selector]) {
return false;
}
var fnNew = Event.funcList[selector][type][fn];
if (!fnNew) {
return;
}

Event.offEvent(obj,fnNew);
Event.funcList[selector][type][fn] = null;

},delegateHandle: function(obj,fn) {
/ 实现delegate 的转换方法，事件冒泡上升时,符合条件时才会执行回调函数 /
var func = function(event) {
var event = event || window.event;
var target = event.srcElement || event.target;
var parent = target;

  function contain(item,elmName) {
    if (elmName.split('#')[1]) { //by id
      if (item.id && item.id === elmName.split('#')[1]) {
        return true;
      }
    }
    if (elmName.split('.')[1]) { //by class
      if (hasClass(item,elmName.split('.')[1])) {
        return true;
      }
    }
    if (item.tagName == elmName.toUpperCase()) {
      return true; //by tagname
    }
    return false;
  }
  while (parent) {
    /* 如果触发的元素，属于(selector)元素的子级。 */
    if (obj == parent) {
      return false; //触发元素是自己
    }
    if (contain(parent,selector)) {

      fn.call(obj,event);
      return;
    }
    parent = parent.parentNode;
  }
};
return func;

},addEvent: function(target,fn) {
if (!target) return false;
var add = function(obj) {
if (obj.addEventListener) {

    obj.addEventListener(type,false);

  } else {
    // for ie
    if (!Event.ieFuncList[obj]) Event.ieFuncList[obj] = {};
    if (!Event.ieFuncList[obj][type]) Event.ieFuncList[obj][type] = {};
    Event.ieFuncList[obj][type][fn] = function() {
      fn.apply(obj,arguments);
    };
    obj.attachEvent("on" + type,Event.ieFuncList[obj][type][fn]);
  }
}
if (target.length >= 0 && target !== window && !target.tagName) {
  for (var i = 0,l = target.length; i < l; i++) {
    add(target[i])
  }
} else {
  add(target);
}

},offEvent: function(target,fn) {
if (!target) return false;
var remove = function(obj) {
if (obj.addEventListener) {
obj.removeEventListener(type,false);

  } else {
    //for ie
    if (!Event.ieFuncList[obj] || !Event.ieFuncList[obj][type] || !Event.ieFuncList[obj][type][fn]) {
      return;
    }
    obj.detachEvent("on" + type,Event.ieFuncList[obj][type][fn],false);
    Event.ieFuncList[obj][type][fn] = {};
  }
}
if (target.length >= 0 && target !== window && !target.tagName) {
  for (var i = 0,l = target.length; i < l; i++) {
    remove(target[i])
  }
} else {
  remove(target);
}

},};

代码-DEMO.html

rush:js;"> <Meta charset="utf-8">

测试 Event

<button id="unbind">取消绑定

<script src="addEvent.js">