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


Posted in Javascript onJuly 27, 2017

DOM2兼容处理顺序问题的解决方法,具体如下

解决顺序问题:我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现,具体代码如下:

/*
 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 = 0;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 = 0;i<ary.length;i++){
  if(ary[i].photo===evenFn){
   ary.splice(i,1)//找到后 把自己存储的容器中对应的移除掉
   curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中对应的也移除掉
   break;
  }
 }
 
}
//创建事件池,并且把需要给当前元素绑定的方法依次的增加到事件池中
function on(curEle,evenType,evenFn){
 if(!curEle["myEvent"+evenType]){
  curEle["myEvent"+evenType] = [];
 }
 var ary = curEle["myEvent"+evenType];
 for(var i = 0;i<ary.length;i++){
  var cur = ary[i];
  if(cur===evenFn){
   return;
  }
 }
 ary.push(evenFn);
 //执行on的时候,我们给当前元素绑定了一个点击的行为,当点击的时候执行run方法:run方法中的this是当前元素curEle,并且浏览器给run传递一个MouseEvent事件对象
 // curEle.addEventListener(evenType,run,false);
 bind(curEle,evenType,run)

}
//在自己的事件池中把某一个方法移除
function off(curEle,evenType,evenFn){
 var ary = curEle["myEvent"+evenType];
 for(var i = 0;i<ary.length;i++){
  var cur = ary[i];
  if(cur===evenFn){
   ary.splice(i,1);
   break;

  }
 }
}
//我们只给当前元素的点击行为绑定一个方法run,当触发点击的时候执行的是run方法,我在run方法中根据自己存储的方法顺序分别的在把这些方法执行

function run(e){
 // this 当前点击的对象curEle
 e = e || window.event;
 var flag = e.target?true:false;
 if(!flag){
  e.target = e.srcElement;

 }
 //获取自己事件池中绑定的那些方法,并且让这些方法依次的执行就可以了
 var ary = this["myEvent"+e.type];//e.target也代表curEle
 for(var i = 0;i<ary.length;i++){
  var tempFn = ary[i];
  tempFn.call(this,e);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JavaScript运算符小结
Jun 03 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
Javascript实现基本运算器
Jul 15 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
Vue2.0如何发布项目实战
Jul 27 #Javascript
You might like
PHP防注入安全代码
2008/04/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
import的本质解析
2017/10/30 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
pandas 数据类型转换的实现
2020/12/29 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
环保公益广告语
2014/03/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
护士节活动总结
2014/08/29 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
夫妻吵架保证书
2015/05/08 职场文书
项目备案申请报告
2015/05/15 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫