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 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
快速了解Node中的Stream流是什么
2019/02/13 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中的localtime()方法使用详解
2015/05/22 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Windows下安装Scrapy
2018/10/17 Python
Python测试模块doctest使用解析
2019/08/10 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
keras slice layer 层实现方式
2020/06/11 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
记者岗位职责
2014/01/06 职场文书
工作违纪检讨书
2014/02/17 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
保留意见审计报告
2015/06/05 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
5个实用的JavaScript新特性
2022/06/16 Javascript
MySQL常用慢查询分析工具详解
2022/08/14 MySQL