1.事件級別
DEMO0 element.οnclick=function() {};
DEMO1 element.addEventListener('click', function(){},false)
DEMO2 element.addEventListener('keyup', function(){},false)
2.事件模型
事件捕獲（自上向下），時間冒泡（自下向上）
事件流：事件捕獲 -> 目標階段 -> 事件冒泡
描述事件捕獲的具體流程
window -> document -> html (document.documentElement) ->body(document.body) -> .... -> 目標元素
3.Event對象的常見應用
event.preventDefault() 阻止默認
event.stopPropagation() 阻止冒泡
event.stopImmediatePropagation() 可在一個點擊事件中阻止另外一個點擊事件
event.currentTarget 事件代理中當前綁定的對象
event.target 被點擊的對象
4.自定義事件
var eve = new Event("custome");
ev.addEventListener("custome", function() {
console.log('custome');
});
ev.dispatchEvent(eve);
示例代碼：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#target {
width: 200px;
height: 100px;
background-color: #0ff;
}
</style>
</head>
<body>
<div id="target">目標區域</div>
<script>
let ele = document.getElementById('target');
window.addEventListener('click', function () {
console.log('window capture');
}, true)
document.addEventListener('click', () => {
console.log('document capture');
}, true)
document.documentElement.addEventListener('click', () => {
console.log('html capture');
}, true)
document.body.addEventListener('click', () => {
console.log('body capture');
}, true)
ele.addEventListener('click', () => {
console.log('target capture');
}, true)
// 自定義事件
let ev = new Event('test');
ele.addEventListener('test', () => {
console.log('自定義事件生效', Date.parse(new Date()));
}, true)
console.log(Date.parse(new Date()));
setTimeout(() => {
ele.dispatchEvent(ev)
}, 1000)
</script>
</body>
</html>