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编程起步(第六课)
Feb 27 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python中装饰器的一个妙用
2015/02/08 Python
Python中的filter()函数的用法
2015/04/27 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Python中 map()函数的用法详解
2018/07/10 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
英国在线泳装店:Simply Swim
2019/05/05 全球购物
护理实习自我鉴定
2013/12/14 职场文书
办理房产证委托书
2014/09/18 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
基层工作经历证明
2015/06/19 职场文书
中秋节祝酒词
2015/08/12 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Vue h函数的使用详解
2022/02/18 Vue.js