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

一．问题所在

现代绑定中W3C使用的是：addEventListener和removeEventListener。IE使用的是attachEvent和detachEvent。我们知道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.IE中this传递过来的是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.无法标准化event；2.无法删除事件。导致的原因很明确，就是使用了匿名函数。标准化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);

}

};

 

//获取IE的event，兼容W3C的调用

addEvent.fixEvent = function (event) {

event.preventDefault = addEvent.fixEvent.preventDefault;

event.stopPropagation = addEvent.fixEvent.stopPropagation;

return event;

};

 

//兼容IE和W3C阻止默认行为

addEvent.fixEvent.preventDefault = function () {

this.returnValue = false;

};

 

//兼容IE和W3C取消冒泡

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];

}

}

}

}

 

转载于:https://www.cnblogs.com/httandytt/p/5939498.html