javascript中传统事件与现代事件

来源: 电脑维修教程 阅读:     发表时间:

本文给各人介绍的是使用传统事件的要领来模拟现代事件,十分的简单实用,有需要的小伙伴可以参考下。 各人都知道,ie中的现代事件绑定(attachevent)

本文给各人介绍的是使用传统事件的要领来模拟现代事件,十分的简单实用,有需要的小伙伴可以参考下。

各人都知道,ie中的现代事件绑定(attachevent)与w3c尺度的(addeventlistener)对比存在很多问题,

例如:内存泄漏,反复添加事件并触发的时候是倒叙执行等。

下面是用传统事件的要领来处理惩罚封装事件的绑定:

addevent.id = 1; // 事件计数器

function addevent(obj, type, fn){

if(obj.addeventlistener){

obj.addeventlistener(type, fn, false);

} else { // ie

// 判断工具是否存在,担保只有一个工具,不然每执行一次,会创建一个事件工具

// 以键值对的形式储存类型与函数的一个数组,=======将事件工具数组挂载到obj工具是为

了方便事件的删除

if( !obj.events){

// 相当于布局为:obj.events : {click:[fn1,fn2], mouserover:[fn1], ...}

obj.events = {};

}

var flag = false;

// 存储事件工具

if( !obj.events[type]){

// 类型数据储存挨个函数

obj.events[type] = [];

// 该类型的第一次事件类型及函数储存到该类型数组中的第一位

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

} else {

var eventfn = obj.events[type];

// 循环遍历该类型工具查询该事件是否反复,如果反复flag为true,并return返回

for(var i in eventfn){

if(eventfn[i] == fn ){

flag = true;

return;

}

}

// 判断该事件是否反复,反复的话就不进行事件的函数的存储,不然储存该事件并执行

if( !flag ){

// 当该类型已经存在了,将为该事件进行累计时间类型函数存储,最后循环执行

eventfn[addevent.id++] = fn;

}

}

// 事件函数 类型数组 函数遍历调用

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

var event = window.event; // 事件工具的储存

// 在事件工具后添加函数,当执行的时候调用,并阻止默认行为的产生,与w3c尺度同步

event.preventdefault = function(){

this.returnvalue = false;

};

// 在事件工具后面添加函数,一个尾巴函数,遏制冒泡。

event.stoppropagation = function(){

this.cancelbubble = true;

};

// 循环遍历执行类型储存的多个函数

var evfn = obj.events[type];

for(var i in evfn){

// 顺序执行该类型的事件函数,电脑维修技术,解决了传统事件的覆盖问题和现代事件绑定的逆序触发

事件的问题

evfn[i].call(this, event); // 将执行函数安排在该工具的环境下执行,并通报一个事件对

象给函数回调使用

}

}

}

}

function removeevent(obj, type, fn){

if(obj.removeeventlistener){

obj.removeeventlistener(type, fn, false);

} else {

// 循环遍历该工具下该类型的事件函数是否函数该函数,如果有就将该事件函数删除

var evefn = obj.events[type];

for(var i in evefn){

if(evefn[i] == fn){

// delete evefn[i]; 该要领也可以删除该数组的该项,但是会保存该位置当访问的时候值

为undefined

evefn.splice( i, 1); // 从第i的位置删除1位,

}

}

}

}

以上所述就是本文的全部内容了,但愿各人能够喜欢。

以上是:解决javascript中传统事件与现代事件问题的详细资料教程