zoukankan      html  css  js  c++  java
  • js学习总结----DOM2兼容处理this问题

    针对上一篇提到的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<ary.length;i++){
            if(ary[i].photo===evenFn){
                curEle.detachEvent("on"+evenType,ary[i]);
                break;
            }
        }
        
    }
  • 相关阅读:
    各种经典透镜投影模型
    表达式和运算
    数组
    如何使用布尔类型
    如何使用数字类型
    如何使用字符串类型
    如何声明变量,如何给变量赋值
    变量 构造函数 New 关键字
    调用write方法打印语句到浏览器
    MVC中几种常用ActionResult
  • 原文地址:https://www.cnblogs.com/diasa-fly/p/7239434.html
Copyright © 2011-2022 走看看