zoukankan      html  css  js  c++  java
  • 三、event 和 event.target(目标元素) 和短路运算以及 组织默认行为、阻止冒泡、事件委托

    
    
    //组织默认行为
        preventDefault:function(event){
            var event = $$.getEvent(event);
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        //阻止冒泡
        stopPropagation:function(event){
            var event = $$.getEvent(event);
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    //事件对象
        getEvent:function(event){
            return event?event:window.event;
        },
        //获取目标
        GetTarget :function(event){
            var e = $$.getEvent(event);
            return e.target|| e.srcElement;
        },
        //组织默认行为
        preventDefault:function(event){
            var event = $$.getEvent(event);
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        //阻止冒泡
        stopPropagation:function(event){
            var event = $$.getEvent(event);
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    //事件委托
        delegate:function (pid, eventType, selector, fn) {
            //参数处理
            var parent = $$.$id(pid);
            function handle(e){
                var target = $$.GetTarget(e);
                if(target.nodeName.toLowerCase()=== selector || target.id === selector || target.className.indexOf(selector) != -1){
                    // 在事件冒泡的时候,回以此遍历每个子孙后代,如果找到对应的元素,则执行如下函数
                    // 为什么使用call,因为call可以改变this指向
                    // 大家还记得,函数中的this默认指向window,而我们希望指向当前dom元素本身
                    fn.call(target);
                }
            }
            //当我们给父亲元素绑定一个事件,他的执行顺序:先捕获到目标元素,然后事件再冒泡
            //这里是是给元素对象绑定一个事件
            parent[eventType]=handle;
        }
  • 相关阅读:
    2017.8.07
    2017.8.05
    2017.8.04
    2017.8.03
    2017.8.02
    2017.8.01
    2017.7.31
    2017.7.29
    2017.7.28
    简易日历
  • 原文地址:https://www.cnblogs.com/yexiangwang/p/5967827.html
Copyright © 2011-2022 走看看