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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JavaScript多种页面刷新方法小结
Apr 04 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Servlet返回的数据js解析2种方法
Dec 12 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将数据导入到Foxmail
2006/10/09 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python实现数据图表
2017/07/29 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python决策树分类算法学习
2017/12/22 Python
python入门教程 python入门神图一张
2018/03/05 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
电子商务优秀毕业生求职信
2014/07/11 职场文书
高三英语教学计划
2015/01/23 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android