实现一个简单的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
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。