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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Webpack执行命令参数详解
Jun 17 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue实现动态按钮功能
May 13 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
基于vue实现探探滑动组件功能
May 29 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 session 错误
2009/05/21 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python list转置和前后反转的例子
2019/08/26 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
大学生求职简历的自我评价
2013/10/14 职场文书
大四本科生的自我评价
2013/12/30 职场文书
银行优秀员工事迹
2014/02/06 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server