來(lái)源
在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實(shí)現(xiàn)了它們。Netscape選擇實(shí)現(xiàn)了捕獲事件流，微軟則實(shí)現(xiàn)了冒泡事件流。幸運(yùn)的是，W3C決定組合使用這兩種方法，并且大多數(shù)新瀏覽器都遵循這兩種事件流方式。
w3c標(biāo)準(zhǔn)dom事件流圖解
w3c標(biāo)準(zhǔn)dom事件流
DOM事件流
將事件分為三個(gè)階段：捕獲階段、目標(biāo)階段、冒泡階段。先調(diào)用捕獲階段的處理函數(shù)，其次調(diào)用目標(biāo)階段的處理函數(shù)，最后調(diào)用冒泡階段的處理函數(shù)。
捕獲階段的函數(shù):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件捕獲</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按鈕">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.addEventListener('click',function(){
alert('你點(diǎn)擊了div');
},true);
btn.addEventListener('click',function(){
alert('你點(diǎn)擊了button');
},true);
</script>
</body>
</html>
冒泡階段的函數(shù):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按鈕">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.onclick = function (){
alert("你點(diǎn)擊了div");
};
btn.onclick = function(){
alert("你點(diǎn)擊了button");
}
</script>
</body>
</html>
區(qū)別
捕獲是由Natscape公司提出的，一般是addEventListener('click', () => {})事件
冒泡是微軟提出的，一般直接是dom.onclick = () => {};
