js学习总结之DOM2兼容处理this问题的解决方法
2017-07-27 14:39
627 查看
针对上一篇提到的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] = []; } curEle["mybind"+evenType].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){ curEle.detachEvent("on"+evenType,ary[i]); break; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js学习总结之DOM2兼容处理顺序问题的解决方法
- js学习总结之DOM2兼容处理重复问题的解决方法
- JS在IE和Firefox的不兼容问题解决方法总结
- jquery 和其他js框架同时使用的不兼容问题解决方法
- JS this作用域以及GET传输值过长的问题解决方法
- 一些原生js处理的兼容性问题解决方法(自己)
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- JavaScript 兼容浏览器的部分问题的总结及解决方法
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- js 解决IE8 数组无IndexOf方法和 js Date兼容浏览器问题
- DOM的基本方法与IE和FF的JS兼容问题
- 最近在ArcGIS Engine开发中关于调用gp工具过程出现COM 组件的调用返回了错误 HRESULT E_FAIL 错误的解决方法 和 学习oracle中遇到的一些问题总结
- 在PHP调用JS中的方法,以此来解决浏览器兼容问题
- js事件跨浏览器解决问题的学习与总结
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- JS this作用域以及GET传输值过长的问题解决方法
- 原型扩展的方法解决IE和Firefox的Js兼容问题
- 海量数据处理问题 解决方法总结
- 笔记-[js兼容]-滚动条的滚动距离的兼容性问题解决方法。
- js浏览器兼容问题总结及解决办法