```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>觸發事件的三個階段</title>
<style type="text/css">
#div1 {
width: 300px;
height: 200px;
background-color: red;
}
#div2 {
width: 250px;
height: 150px;
background-color: green;
}
#div3 {
width: 200px;
height: 100px;
background-color: blue;
}
div:hover {
cursor: pointer;
}
pre {
font-size: 16px;
font-weight: 700;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<pre>
事件共有三個階段:
1.事件捕獲階段 :從外向內
2.事件目標階段 :最開始選擇的那個
3.事件冒泡階段 : 從里向外
addEventListener(event, function, useCapture)中的useCaptrue就是設置捕獲階段或冒泡階段的。
通過e.eventPhase這個屬性可以知道當前的事件是什么階段的:
如果這個屬性的值是:
1---->捕獲階段
2---->目標階段
3---->冒泡
一般默認都是冒泡階段,很少用捕獲階段
冒泡階段:從里向外
捕獲階段:從外向內
</pre>
<script type="text/javascript">
document.getElementById("div1").onclick = function(e) {
console.log(e.eventPhase);
}
document.getElementById("div1").onclick = function(e) {
console.log(e.eventPhase);
}
document.getElementById("div1").onclick = function(e) {
console.log(e.eventPhase);
}
</script>
</body>
</html>
```
- js應用場景
- js組成
- js書寫位置
- 浮點數精度問題
- undefined與null的區別
- 數據類型轉換
- 運算符優先級
- 代碼調試
- 函數
- 函數的定義和調用
- 函數的return細節
- 函數是一種數據類型
- this的指向
- 函數成員
- 函數閉包
- 作用域
- 預解析
- js對象
- 對象的創建與調用
- new關鍵字
- this關鍵字
- 構造函數創建對象
- 事件
- 數據類型
- 繼承
- 雜項
- 如何阻止標簽的默認行為
- 為一個標簽綁定或移除任何一個事件
- 如何阻止事件的冒泡行為
- 事件的三個階段
- 移動元素的條件
- 勻速動畫函數封裝
- 變速動畫函數封裝
- 獲取元素的css屬性值
- 數據類型判斷方法
- 創建對象的7種寫法
- 如何繼承
- 為js內置對象添加原型函數
- 將局部變量轉換為全局變量
- call函數的用法
- 沙箱
- 淺拷貝
- 深拷貝
- 對象賦值會改變對象
- 解析URL中的字符串
- 格式化日期
- 獲取當前瀏覽器類型
- Vue3.x
- 調式工具Vue Devtools