2021-06-23 day12

事件传播

• 事件流：页面接收事件的顺序

• DOM事件流：事件在元素节点之间按照特定的顺序进行传播
  特定的顺序：

• IE： 冒泡，事件触发时，是从最具体(触发的元素)的元素向上逐层传播，直达最顶层元素

• 网景：捕获，事件触发时，是从最顶层逐层向下传播，直达最具体元素

• W3C：DOM事件流的标准：

  1. 捕获阶段
  2. 目标阶段
  3. 冒泡阶段

事件冒泡

oSon.addEventListener('click',function(){
            alert('儿子')
        },false)
        oFather.addEventListener('click',function(){
            alert('他爸')
        },false)
        oGradfther.addEventListener('click',function(){
            alert('他爷')
        },false)

事件捕获

oSon.addEventListener('click',function(){
        alert("儿子")
    },true)
    oFather.addEventListener('click',function(){
        alert("他爹")
    },true)
    oGradfther.addEventListener('click',function(){
        alert("他爷")
    },true)

阻止事件冒泡

oSon.onclick=function(e){
        var ev=e||window.event;
        // e.stopPropagation()
        if(e.cancelBubble){
            e.cancelBubble=true; //IE的678 阻止事件冒泡
        }else{
            e.stopPropagation();//标准
        }
        alert("儿子")
    }
    oFather.onclick=function(){
        alert("他爹")
    }
    oGradfther.onclick=function(){
        alert("他爷")
    }

事件默认

比如a标签默认点击跳转，鼠标右击弹出菜单框
阻止默认事件

// 鼠标右击，默认事件  DOM0级（return false;）
    var oDiv=document.querySelector("div");
    document.oncontextmenu = function(e){
        var ev=window.event||e;
        oDiv.style.display="block";
        oDiv.style.left = ev.pageX + 'px'
        oDiv.style.top = ev.pageY + 'px'
        return false;
    }