事件对象

        event成员列表
            bubbles          Boolean     只读   表明事件是否冒泡
            cancelable       Boolean     只读   表明是否可以取消事件的默认行为
            currentTarget    Element     只读   其事件处理程序当前正在处理的事件的那个元素
            defaultPrevented Boolean     只读   DOM3中新增 为true表示已经调用preventDefault()
            detail           Integer     只读   与事件细节相关信息
            eventPhase       Integer     只读   调用事处理程序的阶段 1 事件捕获阶段 2 处于目标 3 事件冒泡
            preventDefault() Function    只读   取消事件的默认行为 如果cancelable是true 可以使用这个方法
            stopImmediatePropagation()   只读   DOM3中新增 取消事件的进一步捕获或者冒泡 同时阻止任何事件处理程序被调用
            stopPropagation() Function   只读   取消事件的进一步捕获或冒泡 如bubbles为true可以使用此方法
            target           Element     只读   事件的目标
            trusted          Boolean     只读   DOM3中新增 为true 表示事件是浏览器声成的 为false表示事件是由开发人员js创建的
            type             String      只读   被触发的事件类型
            view             AbstracVi   只读   与事件关联的抽象视图 等同于发生事件的window对象
    
        在事件处理程序中 this 始终等于 currentTarget的值 
        target包含事件的实际目标
    

link baidu

// var btn = document.querySelector(".btn");
        // btn.onclick = function (event) {
        //     alert( event.currentTarget == this); //true
        //     alert( event.target  == this)    // true
        // }

        // var btn = document.querySelector(".btn");
        document.body.onclick = function (event) {
            alert("event.eventPhase" + event.eventPhase)// 3 冒泡阶段 
            alert( event.currentTarget == document.body); //true
            alert( this == document.body ) 
            alert( event.target  == btn)    // true
        }

        var link = document.querySelector("a");
        link.onclick = function(event){
            // alert(event.bubbles)
            // event.stopPropagation();
            // alert(event.bubbles)

            alert(event.cancelable)
            alert(event.defaultPrevented) //false 未调用preventDefault
            event.preventDefault();
            alert(event.cancelable)
            alert(event.defaultPrevented) //true 调用preventDefault

            alert("can not link to baidu")
            alert("event.eventPhase" + event.eventPhase); // 2 目标阶段
        }

 

  

 

posted on 2017-12-24 16:12  刘先坤  阅读(135)  评论(0编辑  收藏  举报

导航