事件捕获、事件冒泡
DOM 0 历史由来
DOM level 1 W3C制定的第一个标准，把之前浏览器的混战统一起来（综合、汇总）。 然后有DOM 2、3，DOM 4 还在制定中。
现在主要还在使用DOM 2
问题1：①xxx.onclick = function () {} 和 ② xxx.addEventListener('click',function(){ }) 的区别？
- ①是一个属性，可被覆盖。
- ②是一个人队列。先进先出。
问题2：当点击“儿子”的时候，是否也点击了“父亲”和“爷爷”？
默认值为false，执行顺序为从里到外，如果改为true，执行顺序为从外到里。
另一种记忆方法：
第一阶段，从外到内为“捕获阶段”，如果此时有人插入就执行（值为true）； 第二阶段，从内到外为“冒泡阶段”，依次执行，前面有人插入的就忽略掉。
注意：特例！如果触发和点的是同一个元素，那么前面的结论推翻！执行顺序为代码写的顺序！
如何做「点击其他地方关闭浮层」？
- stopPropagation() 阻止传播
clickMe.addEventListener('click',function(e){
popover.style.display = 'block'
e.stopPropagation()
console.log(1)
})
document.addEventListener('click',function(){
popover.style.display = 'none'
console.log(2)
})
- jQuery实现
<!DOCTYPE html>
<!--
写出一个点开浮层、关闭浮层的例子，要求：
1、点击按钮弹出浮层
2、点击别处关闭浮层
3、点击浮层时，浮层不得关闭
4、再次点击按钮，浮层消失
-->
<meta name="robots" content="noindex">
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>点击按钮出现悬浮框</title>
<style id="jsbin-css">
body {
border: 1px solid red;
}
.wrapper {
position: relative;
display: inline-block;
}
.popover {
border: 1px solid red;
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
padding: 10px;
margin-left: 10px;
background: white;
display: none;
}
.popover::before {
position: absolute;
right: 100%;
top: 5px;
border: 10px solid transparent;
border-right-color: red;
content: '';
}
.popover::after {
position: absolute;
right: 100%;
top: 5px;
border: 10px solid transparent;
border-right-color: white;
content: '';
margin-right: -1px;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<button id="clickMe">点我</button>
<div id="popover" class="popover">
<input type="checkbox">我有一个小毛驴
</div>
</div>
<script id="jsbin-javascript">
$(clickMe).on('click', function () {
if ($(popover).css('display') === 'none') {
$(popover).css('display', 'block')
} else {
$(popover).css('display', 'none')
}
})
$(document).on('click', function () {
$(popover).css('display', 'none')
})
$(wrapper).on('click', function (e) {
e.stopPropagation()
})
</script>
</body>
</html>
