<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id = 't1'>
<div id = 't2'>
<input type="button" value="开始冒泡" id = 't3'/>
<input type="button" value="开始冒泡" id = 't9'/>
</div>
</div>
</body>
</html>
<script>
/*
* js事件流,参考js基础DOM事件ppt
* 三个阶段 :事件捕获,处于目标,冒泡阶段
*/
let target1 = document.getElementById('t1')
target1.addEventListener('click', function(e) {
console.log('t1',e.target,e.currentTarget,e.eventPhase,e.type)
})
let target2 = document.getElementById('t2')
target2.addEventListener('click', function(e) {
console.log('t2',e.target,e.currentTarget,e.eventPhase,e.type)
})
let target3 = document.getElementById('t3')
target3.addEventListener('click', function(e) {
console.log('t3',e.target,e.currentTarget,e.eventPhase,e.type)
})
/*
* js事件委托:利用冒泡原理,将子元素触发的事件绑定在父元素上
*/
let targetAgency = document.getElementById('t1')
targetAgency.addEventListener('click', function(e) {
// console.log('t1',e.target,e.currentTarget,e.eventPhase,e.type)
console.log('事件委托到t1处理')
let target = e.target;
if(target.id === 't3'){
console.log('t3')
}
if(target.id === 't9'){
console.log('t9')
}
})
/*
* 阻止默认事件:e.preventDefault();
* 阻止冒泡:e.stopPropagation()
* return false; 上述两种都阻止,同时还可用于返回需要的值
*/
</script>
添加事件监听函数的方式