js学习总结之DOM2兼容处理重复问题的解决方法


Posted in Javascript onJuly 27, 2017

DOM2兼容处理重复问题的解决方法,具体如下

在解决this问题之后,只需要在每次往自定义属性和事件池当中添加事件的时候进行一下判断就好了,具体代码如下

/*
  bind:处理DOM2级事件绑定的兼容性问题(绑定方法)
  @parameter:
    curEle->要绑定事件的元素
    evenType->要绑定的事件类型("click","mouseover")
    evenFn->要绑定的方法
*/
function bind(curEle,evenType,evenFn){
  if('addEventListener' in document){
    curEle.addEventListener(evenType,evenFn,false);
    return;
  }
  //给evenFn化妆 并且把化妆前的照片贴在自己对应的脑门上
  var tempFn = function(){
    evenFn.call(curEle)
  }
  tempFn.photo = evenFn;
  //首先判断自定义属性之前是否存在,不存在的话创建一个,由于要存储多个化妆后的结果,所以我们让其值是一个数组
  if(!curEle["mybind"+evenType]){//根据不同的事件类型是不同的数组
    curEle["mybind"+evenType] = [];
  }
  //解决重复问题:每一次自己在往自定义属性对应的容器中添加前,看一下是否已经存在,存在的话就不用重新的添加了,同理也不需要往事件池里面存储了
  var ary = curEle["mybind"+evenType];
  for(var i = 0;i<ary.length;i++){
    var cur = ary[i];
    if(cur.photo === evenFn){
      return;
    }
  }
  ary.push(tempFn);
  curEle.attachEvent("on"+evenType,tempFn);
  //这里的开始想法是改变this的指向,把this不指向window
  /*
    box.attachEvent("onclick",function(){
      fn1.call(box)
    })
    这样虽然解决了this的问题,但是又抛出了一个新的问题,不知道该如何删除了(我们不知道匿名函数是谁)
    var tempFn = function(){
      fn1.call(box)
    }
    box.attachEvent("onclick",tempFn);
    box.detachEvent("onclick",tempFn);
  */
}

function unbind(curEle,evenType,evenFn){
  if('removeEventListener' in document){
    curEle.removeEventListener(evenType,evenFn,false);
    return;
  }
  //拿evenFn到curEle["myBind"]这里找化妆后的结果,找到之后再事件池中把化妆后的结果移除事件池
  var ary = curEle['myBind'+evenType];
  for(var i = 0;i<ary.length;i++){
    if(ary[i].photo===evenFn){
      ary.splice(i,1)//找到后 把自己存储的容器中对应的移除掉
      curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中对应的也移除掉
      break;
    }
  }
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
jsPDF导出pdf示例
May 02 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
You might like
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
优秀公益广告词大全
2014/03/19 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
综合内勤岗位职责
2014/04/14 职场文书
作文评语集锦大全
2014/04/23 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
戒赌保证书
2015/05/11 职场文书
新年晚会开场白
2015/05/29 职场文书
同事离别感言
2015/08/04 职场文书
中学生运动会广播稿
2015/08/19 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers