js学习总结----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);
    }
}
时间: 2024-11-10 06:27:26

js学习总结----DOM2兼容处理顺序问题的相关文章

js学习总结----DOM2兼容处理重复问题

在解决this问题之后,只需要在每次往自定义属性和事件池当中添加事件的时候进行一下判断就好了,具体代码如下 /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn){ if('addEventLi

js学习总结----ajax兼容处理及惰性思想

封装代码如下: // var xhr = null; // //为了兼容IE6及更低的版本:如果第一个不支持,则浏览器会报错,后面就不在执行了 // try{ // xhr = new ActiveXObject("Microsoft.XMLHTTP"); // }catch(e){ // } // if(new ActiveXObject("Microsoft.XMLHTTP")){ // xhr = new ActiveXObject("Microso

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

Backbone.js学习之一

昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以鱼,不如授之以渔.”,我花了一段时间仔细的看完了的第一章节,今天通过自己所理解的, 记录下我自学的第一步.其他不多说,进入主题: 首先在学习Backbone.js之前要了解Backbone.js是什么? 在我看来它是一个处理前端MVC很好的js框架,Backbone是一个非常轻量级的javascript库,自

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

video.js学习笔记

在开发的项目中,有视频播放这个功能,找了好多前端的插件,最后决定时用video.js . 什么是video.js? video.js是一个开源的HTML5  jquery 视频插件,这个插件可以用来处理Flash 视频,也可以很好的支持H5,它还是一个多平台支持的产品. video.js的优点 它是开源免费的,可以在github很容易的获取到最新的源码. 使用起来非常容易,只要花几秒中就可以夹起一个视频播放页面. 它几乎兼容所有的浏览器,并且优先使用HTML5,在不支持的浏览器中,会自动生成Fa

js学习篇1--数组

javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会改变数组的大小的,例如: var array=[1,2,3]; console.log(array.length);//输出array的长度为3 array.length=5;//给array的长度赋值为5,此时array的内容变为[1,2,3,undefined,undefined] consol

js学习笔记——数组方法

join() 把数组中所有元素转化为字符串并连接起来,并返回该字符串, var arr=[1,2,3]; var str=arr.join("#"); //str="1#2#3"; 如果没有指定分隔符,则默认为逗号 var str2=arr.join(); //str2="1,2,3"; reverse() 在原数组上把元素的顺序颠倒过来,并返回该数组 var arr=[1,2,3]; arr.reverse(); //arr=[3,2,1];