js学习总结之DOM2兼容处理this问题的解决方法
作者:diasa
这篇文章主要为大家详细介绍了js学习总结之DOM2兼容处理this问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
针对上一篇提到的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; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。