在解决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. THUWC 2018(游记)

    这次是在雅礼洋湖中学举行的,一所2017年才创办的学校,新的学校, 貌似有些危险,积雪过多屋顶上的冰块砸下来,很容易砸到人, 听说最近就有一个人被砸死了. Day1 昨天睡的比较迟,12点吧,今天早上 ...

  2. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  3. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  4. 最长k可重区间集(cogs 743)

    «问题描述:«编程任务:对于给定的开区间集合I和正整数k,计算开区间集合I的最长k可重区间集的长度.«数据输入:由文件interv.in提供输入数据.文件的第1 行有2 个正整数n和k,分别表示开区间 ...

  5. .NET设计模式系列文章《转》

    原文发布时间为:2008-11-02 -- 来源于本人的百度文章 [由搬家工具导入] http://www.cnblogs.com/Terrylee/archive/2006/07/17/334911 ...

  6. Spring Boot学习——Controller的使用

    本文主要记录几个注释的使用方法. 1. @Controller : 处理http请求 2. @RequestMapping : 配置URL映射 3. @RestController : 组合注解,sp ...

  7. Java反射获取类对象的三种方式

    package demo01; /* * 获取一个类的class文件对象的三种方式 * 1.对象获取 * 2.类名获取 * 3.Class类的静态方法获取 */ public class Reflec ...

  8. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  9. Codeforces 161D Distance in Tree(树型DP)

    题目链接 Distance in Tree $k <= 500$ 这个条件十分重要. 设$f[i][j]$为以$i$为子树,所有后代中相对深度为$j$的结点个数. 状态转移的时候,一个结点的信息 ...

  10. MySQL的INFORMATION_SCHEMA数据库简介

    大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...