dom 事件流 三个阶段
1 JS 代码中只能执行捕获或者冒泡其中的一个阶段
2 onclick 和 attachEvent(ie) 只能得到冒泡阶段
3 捕获阶段 如过addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father
结构
<div class="father">
<div class="son"></div>
</div>
CSS
.father {
padding: 30px;
margin: 0 auto;
width: 100px;
height: 100px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
JS
// dom 事件流 三个阶段
// 1 JS 代码中只能执行捕获或者冒泡其中的一个阶段
// 2 onclick 和 attachEvent(ie) 只能得到冒泡阶段
// 3 捕获阶段 如过addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father
var son = document.querySelector('.son');
son.addEventListener('click', function ()
{
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function ()
{
alert('father')
}, true)
// 4 冒泡阶段 如果addEventListener 第三个参数是false 或者 省略 那么处于冒泡阶段
// father -> body -> html -> document
son.addEventListener('click', function ()
{
alert('son');
}, false);
father.addEventListener('click', function ()
{
alert('father')
}, false);
document.addEventListener('click', function ()
{
alert('document');
})