50-window.addEventListener和document.addEventListener區別
阿新 • • 發佈：2020-09-15
原文：https://blog.csdn.net/MLGB__NIU/article/details/79107984
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('click',function(){
console.log('window addEventListener');
},false);
document.addEventListener('click',function(){
console.log('document addEventListener')
},false);
</script>
</body>
</html>
介面上點選一個button按鈕，button實際上是被body“包裹”起來的，body是被html“包裹”起來的，html是被document“包裹”起來的，document是被window“包裹”起來的。所以，在你的滑鼠點下去的時候，最先獲得這個點選的是最外面的window，然後經過一系列傳遞才會傳到最後的目標button，當傳到button的時候，這個事件又會像水底的泡泡一樣慢慢往外層穿出，直到window結束。