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实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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 cdata 处理(详细介绍)
2013/07/05 PHP
php数组删除元素示例
2014/03/21 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
请说出以下代码输出什么
2013/08/30 面试题
实习教师自我鉴定
2013/12/09 职场文书
小区停车场管理制度
2014/01/27 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
如何书写授权委托书?
2019/06/25 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android