js学习总结--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=;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兼容处理重复问题的更多相关文章
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- JS学习中遇到的一些题目
1.找出所有的水仙花数: 水仙花数例如:153 的特点: 1^3+5^3+3^=153 而且水仙花数只会是三位数,所以可以利用循环的方式来解决问题,循环条件可以设为: var i = 1;i < ...
- 我的three.js学习记录(二)
通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- JS学习小结(上)
学而时习之,不亦说乎,开启JS学习新乐章~ JS是干啥的?网页特效,它主要是实现控制结构和样式,是一种行为,有多重要,不言而喻吧,页面炫酷的资本. 1. JS输出: alert("hello ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- JS学习:JavaScript的核心
分享到 分类 JS学习 发布 ourjs 2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息. 作者: JeremyWei 原文: JavaScript The ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- js 如何生成一个不重复的ID的函数
在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://www.jb51.net/article/101164.htm感兴趣可以去研究一下. 我今天要做的就是做 ...
- response contentType
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. 例如web浏览器就是通过MI ...
- strcpy_s 函数的用法
strcpy_s和strcpy()函数的功能几乎是一样的. strcpy函数,就象gets函数一样,它没有方法来保证有效的缓冲区尺寸,所以它只能假定缓冲足够大来容纳要拷贝的字符串.在程序运行时,这将导 ...
- DB2数据库用 With语句分隔字符
SELECT T1.REPAIRNO, T1.UNDERTAKER10, T3.FULLNAME AS RECEIVERNAME, T1.WALKDISTANCE, T1.STATUSCODEDATE ...
- UVA 272 TEX Quotes【字符串】
https://vjudge.net/problem/UVA-272 [分析]:标记一下. [代码]: #include <bits/stdc++.h> using namespace s ...
- Topcoder SRM 666 DIV 1
WalkOverATree 题意:给你一棵树,有个人在节点0,现在问你,这个人走L步,最多能访问多少个不同的节点,一个节点可以被走多次,但只算一次. 题解:这个问题的关键在于,每个点最多走两次,这是因 ...
- Android无需权限显示悬浮窗, 兼谈逆向分析app
前言 最近UC浏览器中文版出了一个快速搜索的功能, 在使用其他app的时候, 如果复制了一些内容, 屏幕顶部会弹一个窗口, 提示一些操作, 点击后跳转到UC, 显示这个悬浮窗不需要申请android. ...
- 对象第复制operator=
类机制中有默认的对象复制操作符=,自定义对象复制需要注意一个问题,如果有遇到指针指向的资源是需要释放的,这时需要毫不留情释放,否则内存空间的泄露就不可避免.复制操作与拷贝构造函数的参数是一致的,只是在 ...
- Python moni模拟鼠标事件
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4 ...
- 正确理解hadoop 2.x 的环形缓冲区: (一) MR环形缓冲区的结构
转载:http://blog.csdn.net/HADOOP_83425744/article/details/49560583 http://bigdatadecode.club/MapReduce ...