javascript中传统事件与现代事件


Posted in Javascript onJune 23, 2015

大家都知道,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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
js闭包所用的场合以及优缺点分析
Jun 22 #Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 #Javascript
You might like
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
2014/02/04 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
生日派对邀请函
2014/01/13 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
复试通知单模板
2015/04/24 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
python读取mnist数据集方法案例详解
2021/09/04 Python