今天學習了事件冒泡和捕獲，記錄一下。
1.冒泡型事件：事件按照從最特定的事件目标到最不特定的事件目标(document對象)的順序觸發。
我一般用法就是了解為觸發事件A, 會觸發A的父親，爺爺，爺爺的父親......
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點選事件捕獲冒泡實驗</title>
</head>
<body>
<div id="grandPa">
<div id="father">
<div id="son">
<input type="button" value="click"/>
</div>
</div>
</div>
<script type="text/javascript">
var father = document.getElementById('father');
father.addEventListener('click',function () {
alert('fattther');
})
var son = document.getElementById('son');
son.addEventListener('click',function () {
alert('son');
});
</script>
</body>
</html> 點選button，會以此彈出"son", "father"。、
2.捕獲事件：使用事件捕獲時，父級元素先觸發，子級元素後觸發。
我們使用addEventListener添加監聽事件時，參數分别為(事件類型, function(){}, capture), 一般不寫第三個參數時預設為false，即事件冒泡。
是以1中的代碼會是事件冒泡順序。如果我們想改為事件捕獲，把參數設定為true即可，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點選事件捕獲冒泡實驗</title>
</head>
<body>
<div id="container">
<div id="father">
<div id="son">
<input type="button" value="click"/>
</div>
</div>
</div>
<script type="text/javascript">
var father = document.getElementById('father');
father.addEventListener('click',function () {
alert('fattther');
},true)
var son = document.getElementById('son');
son.addEventListener('click',function () {
alert('son');
});
</script>
</body>
</html> 這樣當你點選button後就會以此彈出"father", "son"了。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)