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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python yield 使用浅析
2015/05/28 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python 如何对文件目录操作
2020/07/10 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
机电专业体育教师求职信
2013/09/21 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
空乘英文求职信
2014/04/13 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
python代码实现备忘录案例讲解
2021/07/26 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
python保存图片的四个常用方法
2022/02/28 Python