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 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
js操作select控件的几种方法
Jun 02 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
Javascript函数式编程语言
Oct 11 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php下过滤HTML代码的函数
2007/12/10 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python常规方法实现数组的全排列
2015/03/17 Python
Python内置函数delattr的具体用法
2017/11/23 Python
PyQt5每天必学之组合框
2018/04/20 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
五年级音乐教学反思
2014/02/06 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python