-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
重复问题:IE6~8可以给同一个元素的同一个行为绑定多个相同的方法
//->解决顺序问题:
//我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现
//->on:创建事件池,并且把需要给当前元素绑定的方法依次的添加到事件池中
function on(curEle, eventType, eventFn) {
if (!curEle["myEvent" + eventType]) {
curEle["myEvent" + eventType] = [];
}
var ary = curEle["myEvent" + eventType];
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
if (cur === eventFn) {
return;
}
}
ary.push(eventFn);
//->执行on的时候,我们给当前元素绑定了一个点击的行为,当点击的时候执行run方法;
// run方法中的this是当前元素curEle,并且浏览器给run传递了一个MouseEvent事件对象
//curEle.addEventListener(eventType, run, false);
bind(curEle, eventType, run);
}
//->off:在自己的事件池中把某一个方法移除
function off(curEle, eventType, eventFn) {
var ary = curEle["myEvent" + eventType];
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
if (cur === eventFn) {
ary.splice(i, 1);
break;
}
}
}
//->run:我们只给当前元素的点击行为绑定一个方法run,
// 当触发点击的时候执行的是run方法,我在run方法中根据自己存储的方法顺序分别的再把这些方法执行
function run(e) {
e = e || window.event;
var flag = e.target ? true : false;//->IE6~8下不兼容e.target,得到的flag为false
if (!flag) {
e.target = e.srcElement;
e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
e.pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
e.preventDefault = function () {
e.returnValue = false;
};
e.stopPropagation = function () {
e.cancelBubble = true;
};
}
//->this:当前点击的这个元素curEle
//->e.target:存储的是当前触发的元素curEle
//->获取自己事件池中绑定的那些方法,并且让这些方法依次的执行
var ary = this["myEvent" + e.type];
for (var i = 0; i < ary.length; i++) {
var tempFn = ary[i];
tempFn.call(this, e);
}
}
Metadata
Metadata
Assignees
Labels
No labels