网站建设资讯

NEWS

网站建设资讯

js中DOM2兼容处理this的示例分析

这篇文章主要介绍js中DOM2兼容处理this的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

十余年的邵东网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整邵东建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“邵东网站设计”,“邵东网站推广”以来,每个客户项目都认真落实执行。

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

以上是“js中DOM2兼容处理this的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章名称:js中DOM2兼容处理this的示例分析
路径分享:http://njwzjz.com/article/ieopoe.html