JavaScriptCallback回调函数和事件委托的封装

callback回调函数

由于JavaScript语句是按照次序执行的,因为动画未完成,动画之后的语句可能会产生错误或页面冲突。为避免这种情况,可以使用callback函数。

callback回调函数就是放在另一个函数(parent)的参数列表中,作为参数传递给parent,然后在parent函数体的某个位置执行。

    function fn(a,b,fn2){
        console.log(a+b);
        fn2();
    }
    function callBack(){
        console.log("我是函数参数")
    }
    fn(a,b,callBack);//在这里就callBack就是回调函数

事件委托的封装

    function targetHandle(type,child,parent,fn){
        //type事件类型 child
        if(parent.addEventListener){//判断浏览器是否为IE浏览器,此处为非IE
            parent.addEventListener(type,function(e){
                var e=e||window.event;
                var target=e.target;
                //事件想绑定到child上
                for(var i=0;i<child.length;i++){
                    //判断触发事件的元素是否是想绑定事件的元素或者是想绑定元素事件的子代
                    if(cp(target,child[i])){
                        fn.call(child[i]);//改变this指向,否则指向window
                    }
                }
            },false)
        }else{
            parent.attachEvent(type,function(e){
                var e=e||window.event;
                var target=e.target;
                for(var i=0;i<child.lenthli++){
                    if(cp(target,child[i])){
                        fn.call(child[i]);
                    }
                }
            })
        }
    }

    function cp(child,parent){
        if(child==parent){
            return true;
        }else{
            while(child.parentNode){
                if(child.parentNode==parent){
                    return true;
                    break;
                }else{
                    child=child.parentNode;
                }
            }
        }
    }

    例如:
    var wrap=document.querySelector("ul");
    var lis=wrap.getElementsByTagName("li");
    targetHandle("click",lis,wrap,function(){
        console.log(this);
    })