菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
206
0

js学习总结之DOM2兼容处理this问题的解决方法

原创
05/13 14:22
阅读数 89141
/*
 bind:处理DOM2级事件绑定的兼容性问题(绑定方法)
 @parameter:
  curEle->要绑定事件的元素
  evenType->要绑定的事件类型("click","mouseover")
  evenFn->要绑定的方法
*/
function bind(curEle,evenType,evenFn){
 if('addEventListener' in document){
  curEle.addEventListener(evenType,evenFn,false);
  return;
 }
 //给evenFn化妆 并且把化http://www.cppcns.com妆前的照片贴在自己对应的脑门上
 var tempFn = function(){
  evenFn.call(curEle)
 }
 tempFn.photohttp://www.cppcns.com = evenFn;
 //首先判断自定义属性之前是否存在,不存在的话创建一个,由于要存储多个化妆后的结果,所以我们让其值是一个数组
 if(!curEle["mybineIvdQd"+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(curEl编程客栈e,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兼容处理this问题的解决方法
本文地址: http://www.cppcns.com/wangluo/javascript/198002.html

发表评论

0/200
206 点赞
0 评论
收藏
为你推荐 换一批