实现一个简单的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="/UploadFiles/2021-04-02/addEvent.js">
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“javascript实现简单的on事件绑定”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍