javascript实现简单的on事件绑定

2019-11-20 09:10:44

字体：大中小

来源：转载

供稿：网友

实现一个简单的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, fn, false);

代码-Event.js

/** * addEvent * author laynezhou@tencent.com */window.Event = {};var Event = {  funcList: {}, //保存delegate所绑定的方法    ieFuncList: {}, //由于保存在ie下绑定的方法  on: function(obj, selector, type, fn) {    if (!obj || !selector) return false;    var fnNew = Event.delegateHandle(obj, selector, fn);    Event.addEvent(obj, type, 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, selector, type, fn) {    if (!obj || !selector || !Event.funcList[selector]) {      return false;    }    var fnNew = Event.funcList[selector][type][fn];    if (!fnNew) {      return;    }    Event.offEvent(obj, type, fnNew);    Event.funcList[selector][type][fn] = null;  },  delegateHandle: function(obj, selector, 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, type, fn) {    if (!target) return false;    var add = function(obj) {      if (obj.addEventListener) {        obj.addEventListener(type, fn, 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, type, fn) {    if (!target) return false;    var remove = function(obj) {      if (obj.addEventListener) {        obj.removeEventListener(type, fn, 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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title></head><body><p>测试 Event </p><div id=content>  <ul>    <li><button id="btn1">1</button></li>    <li><button id="btn2">2</button></li>    <li><button id="btn3">3</button></li>    <li><button id="btn4">4</button></li>    <li><button id="btn5">5</button></li>  </ul><button id="unbind">取消绑定</button></div><p id="text"></p><script src="addEvent.js"></script><script>(function(){  /* 演示demo*/  var $id=function(id)  {    return document.getElementById(id) || id;  }  var outer = $id("content"),    btn = $id("text");  Event.on(outer,'button',"click",add);  Event.on(outer,'#unbind',"click",remove);  //动态添加一个按钮,查看是否有事件响应  var newbtn = document.createElement("button");  var node = document.createTextNode("new button");  newbtn.appendChild(node);  outer.appendChild(newbtn);  function add(){    var e = arguments[0] || window.event;    var target = e.srcElement || e.target;    console.log("target:",target);    btn.innerHTML = target.innerHTML + ' ' + e.type;  }  function remove(){    Event.off(outer,'button',"click",add);    Event.off(outer,'#unbind',"click",remove);  }})();</script></body></html>

上一篇：深入浅出 jQuery中的事件机制

下一篇：js实现图片淡入淡出切换简易效果