首页 > 代码库 > js前端--解决非IE浏览器事件绑定的一些问题

js前端--解决非IE浏览器事件绑定的一些问题

一.问题所在

现代绑定中W3C使用的是:addEventListenerremoveEventListenerIE使用的是attachEventdetachEvent。我们知道IE的这两个问题多多,并且伴随内存泄漏。所以,解决这些问题非常有必要。

那么我们希望解决非IE浏览器事件绑定哪些问题呢?

1.支持同一元素的同一事件句柄可以绑定多个监听函数;

2.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略;

3.函数体内的this指向的应当是正在处理事件的节点(如当前正在运行事件句柄的节点);

4.监听函数的执行顺序应当是按照绑定的顺序执行;

5.在函数体内不用使用 event = event || window.event; 来标准化Event对象;

 

二.设置代码

//跨浏览器添加事件

function addEvent(obj, type, fn) {

if (typeof addEventListener != ‘undefined‘) {

obj.addEventListener(type, fn, false);

} else if (typeof attachEvent != ‘undefined‘) {

obj.attachEvent(‘on‘ + type, fn);

}

}

 

//跨浏览器删除事件

function removeEvent(obj, type, fn) {

if (typeof removeEventListener != ‘undefined‘) {

obj.removeEventListener(type, fn);

} else if (typeof detachEvent != ‘undefined‘) {

obj.detachEvent(‘on‘ + type, fn);

}

}

 

上面的这两个函数解决了:1.同时绑定多个函数;2.标准event

上面的这两个函数没有解决的问题:1.IE多次注册同一函数未被忽略;2.IE中顺序是倒序;3.IEthis传递过来的是window

 

为了解决this传递问题,我们需要使用匿名函数+传递方式参数的方式来解决:

obj.attachEvent(‘on‘ + type, function () {

fn(obj);

});

 

addEvent(oButton, ‘click‘, function (_this) {

alert(_this.value);

});

 

这种方式比较古板,更好一点的方式是使用call来冒充对象。

obj.attachEvent(‘on‘ + type, function () {

fn.call(obj);

});

 

addEvent(oButton, ‘click‘, function () {

alert(this.value);

});

 

call的用法回忆一下:

fn.call(obj); //this就是obj对象

fn.call(123); //this就是123

fn.call(123,456); //this就是123,第一个参数是456

 

PS:也就是说,使用了call第一个参数就是this获取,从第2个参数开始,可以通过函数参数获取,以此类推。

 

使用了call传递this,带来的诸多另外的问题:1.无法标准化event2.无法删除事件。导致的原因很明确,就是使用了匿名函数。标准化event可以解决,无法删除事件就没有办法了,因为无法确定是哪一个事件。

obj.attachEvent(‘on‘ + type, function () {

fn.call(obj, window.event);

});

我们尝试着通过使用传统事件绑定对IE进行封装。

 

//跨浏览器添加事件绑定

 

function addEvent(obj, type, fn) {

 

if (typeof obj.addEventListener != ‘undefined‘) {

 

obj.addEventListener(type, fn, false);

 

} else {

 

//创建一个可以保存事件的哈希表(散列表)

 

if (!obj.events) obj.events = {};

 

if (!obj.events[type]) {

 

//创建一个可以保存事件处理函数的数组

 

obj.events[type] = [];

 

//存储第一个事件处理函数

 

if (obj[‘on‘ + type]) obj.events[type][0] = fn;

 

}

 

//通过事件计数器来从第二个事件处理函数开始

 

obj.events[type][addEvent.ID++] = fn;

 

//执行所有事件处理函数

 

obj[‘on‘ + type] = function () {

 

for (var i in obj.events[type]) {

 

obj.events[type][i]();

 

}

 

}

 

}

 

}

 

//每个事件分配一个ID计数器

 

addEvent.ID = 1;

//跨浏览器添加事件绑定

function addEvent(obj, type, fn) {

if (typeof obj.addEventListener != ‘undefined‘) {

obj.addEventListener(type, fn, false);

} else {

//创建事件类型的散列表(哈希表)

if (!obj.events) obj.events = {};

//创建存放事件处理函数的数组

if (!obj.events[type]) {

obj.events[type] = [];

//存储第一个事件处理函数

if (obj[‘on‘ + type]) {

obj.events[type][0] = fn;

}

//执行事件处理

obj[‘on‘ + type] = addEvent.exec;

} else {

//同一个注册函数取消计数

if (addEvent.array(fn,obj.events[type])) return false;

}

//从第二个开始,通过计数器存储

obj.events[type][addEvent.ID++] = fn;

}

}

 

addEvent.array = function (fn, es){

for (var i in es) {

if (es[i] == fn) return true;

}

return false;

}

 

//每个事件处理函数的ID计数器

addEvent.ID = 1;

 

//事件处理函数调用

addEvent.exec = function (event) {

var e = event || addEvent.fixEvent(window.event);

var es = this.events[e.type];

for (var i in es) {

es[i].call(this, e);

}

};

 

//获取IEevent,兼容W3C的调用

addEvent.fixEvent = function (event) {

event.preventDefault = addEvent.fixEvent.preventDefault;

event.stopPropagation = addEvent.fixEvent.stopPropagation;

return event;

};

 

//兼容IEW3C阻止默认行为

addEvent.fixEvent.preventDefault = function () {

this.returnValue = http://www.mamicode.com/false;

};

 

//兼容IEW3C取消冒泡

addEvent.fixEvent.stopPropagation = function () {

this.cancelBubble = true;

};

 

//跨浏览器删除事件

function removeEvent(obj, type, fn) {

if (typeof obj.removeEventListener != ‘undefined‘) {

obj.removeEventListener(type, fn, false);

} else {

var es = obj.events[type];

for (var i in es) {

if (es[i] == fn) {

delete obj.events[type][i];

}

}

}

}

 

js前端--解决非IE浏览器事件绑定的一些问题