在解决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=;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=;i<ary.length;i++){
if(ary[i].photo===evenFn){
ary.splice(i,)//找到后把自己存储的容器中对应的移除掉
curEle.detachEvent("on"+evenType,ary[i]);//再把事件池中对应的也移除掉
break;
}
}
}

js学习总结--DOM2兼容处理重复问题的更多相关文章

  1. [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  2. JS学习中遇到的一些题目

    1.找出所有的水仙花数: 水仙花数例如:153 的特点: 1^3+5^3+3^=153 而且水仙花数只会是三位数,所以可以利用循环的方式来解决问题,循环条件可以设为: var i = 1;i < ...

  3. 我的three.js学习记录(二)

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. JS学习小结(上)

    学而时习之,不亦说乎,开启JS学习新乐章~ JS是干啥的?网页特效,它主要是实现控制结构和样式,是一种行为,有多重要,不言而喻吧,页面炫酷的资本. 1. JS输出: alert("hello ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. JS学习:JavaScript的核心

    分享到 分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息.     作者: JeremyWei  原文: JavaScript The ...

  8. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

  9. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

随机推荐

  1. codeforces 757F - 最短路DAG+灭绝树

    Description 给定一个n个点,m条边的带权无向图,和起点S.请你选择一个点u(u!=S),使得在图中删掉点u 后,有尽可能多的点到S的最短距离改变. Solution 先建出最短路DAG,在 ...

  2. 51Nod 1003 1004 1009

    1003 阶乘后面0的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 720,720后面有1 ...

  3. LOJ#2131. 「NOI2015」寿司晚宴

    $n \leq 500$,$2-n$这些数字,两个人挑,可以重复挑,问有几种方案中,一个人选的所有数字与另一个人选的所有数字都互质. 不像前两题那么抠脚.. 如果$n$比较小的话,可以把两个人选的数字 ...

  4. JavaScript日历控件!JS兼容IE6.7.FF.可挡住下拉控件

    原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  5. <转>JavaScript的IE和火狐的兼容性解决办法

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.form ...

  6. 搞定vim的窗口操作

    最近在给学生演示数据结构代码时,发现用一般的方法总会有不方便,如果使用ide又觉得太浪费了,后来觉得用vim就够了,使用buffer总会需要页面调来跳出,学生看起来容易迷糊.所以就研究了下vim的窗口 ...

  7. Python 多核 多线程 调度

    参考: http://www.oschina.net/translate/pythons-hardest-problem https://news.ycombinator.com/item?id=58 ...

  8. .NET 下二维码解决方案

    使用Zint和Zxing实现二维码的编码与解码(Using open-source tools to generate and decode Q-R code) 1.Zint生成二维码 http:// ...

  9. Jackson是线程安全的吗

    网上说是线程安全的,内部代码用了ThreadLocal.Synchronized这些线程安全类和关键字,可以放心的用. 避免每次使用都new一个,全局配置一个ObjectManager的对象将大大减少 ...

  10. Linux下Shell脚本字符串单引号、双引号、反引号、反斜杠的作用和区别

    一.单引号 str='this is a string' 单引号字符串的限制: 单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的: 单引号字串中不能出现单引号(对单引号使用转义符后也不行) ...