事件冒泡和事件捕获

事件冒泡和事件捕获

1. 事件冒泡

1.1 简介

即事件由子元素向父元素传播，就像气泡从水底向水面上浮一样。

<div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
        <li onclick='alert("li");'>test</li>
    </ul>
</div>

上面的代码，我们单击 test 时，会依次触发 alert(“li”), alert(“ul”), alert(“div”)，这就是事件冒泡。

1.2 如何取消事件冒泡

防止冒泡和捕获：

w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true

当需要停止冒泡时，可以使用

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

取消默认事件：

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

当需要阻止默认行为时，可以使用

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

2. 事件捕获

事件捕获是一个和冒泡阶段完全相反的过程，即事件由父元素向子元素传播。要说明的是，在 IE 浏览器中是不存在这个阶段的。

在 DOM 标准事件模型中，是先捕获后冒泡，但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被执行后再执行捕获事件。