事件冒泡的原理?如何禁止事件冒泡 ?

1.如何阻止事件冒泡?

function stopBubble(e){
    //如果提供了事件对象,则这是一个非 ie 浏览器
    if(e && e.stopPropagation){
        e.stopPropagation();
    }else{
        window.event.cancelBubble = true;
    }
    return false;
}

2.事件流

事件流描述的是从页面中接受事件的顺序,IE 的事件流是事件冒泡,而 Netscape Communicator 的事件流是事件捕获流。

事件冒泡:即事件开始时由最具体的元素,然后逐级向上传播到较为不具体的结点。(ieffchromesafari会将事件一直冒泡到 window 对象。)

事件捕获:事件捕获的思想是不太具体的结点应该更早接收到事件,而最具体的结点应该最后接受到事件。事件捕获的用意在于在事件达到预定目标之前捕获它。

要阻止特定事件的默认行为,可以使用 preventDefault()方法。例如,链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为,那么通过链接的onclick 事件处理程序可以取消它:

var link = document.getElementById("myLink");
    link.onclick = function(event){
    event.preventDefault();
};

只有 cancelable 属性设置为 true 的事件,才可以使用 preventDefault()来取消其默认行为。

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加一个按钮的事件处理给程序可以调用 stopPropagetion(),从而避免触发注册在 document.body 上面的事件处理程序:

var btn = document.getElementById("myBtn");
    btn.onclick = function(event){
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick = function(event){
    alert("Body clicked");
};

事件对象的 eventPhase 属性,可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序,其值为1;如果事件处理程序处于目标对象上,其值为2;如果是在冒泡阶段调用的事件处理程序,其值为3。这里要注意的是,尽管“处于目标”发生在冒泡阶段,但是 eventPhase 的值仍然一直等于2

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase);//2
}

document.body.addEventListener("click",function(evnet){
    alert(event.eventPhase);//1
},true);

document.body.onclick = function(event){
    alert(event.eventPhase);//3
}

当单击这个例子中的按钮时,首先执行的事件处理程序是在捕获阶段触发的添加到 document.body 中的那一个,结果会弹出一个警告框表示 event.Phase 的值为1。接着,会触发在按钮上注册的事件处理程序,此时的 eventPhase 的值为2;最后一个被触发的事件处理程序,是在冒泡阶段执行的添加到 document.body 上的那一个,显示 eventPhase 的值为3。而当 eventPhase 的值为2时,this.targetcurrentTarget 的值始终都是相等的。

只有在事件处理程序执行期间,event 对象才会存在;一旦事件处理程序执行完成,event 对象就会被销毁。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值