<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
box-sizing: border-box;
margin:20px auto;
padding-top: 20px;
width: 300px;
height: 300px;
background: lightblue;
}
.outer{
box-sizing: border-box;
margin: 0 auto;
padding-top: 20px;
width: 200px;
height: 200px;
background: lightcoral;
}
.inner{
margin: 0 auto;
width: 100px;
height: 100px;
background: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="box">box
<div class="outer">outer
<div class="inner">inner</div>
</div>
</div>
<script>
let box = document.querySelector('.box'),
outer = document.querySelector('.outer'),
inner = document.querySelector('.inner');
/**
* DOM 0级 绑定中给元素事件绑定的方法, 都是在目标阶段 =》 冒泡阶段触发的
* 从里 往外 inner =》 outer => box
*/
// inner.onclick = function(ev){
// console.log('inner=>',ev);
// }
// outer.onclick = function(ev){
// console.log('outer=>',ev);
// }
// box.onclick = function(ev){
// console.log('box=>',ev);
// }
// document.body.onclick = function(ev){
// console.log('body=>',ev);
// }
/**
* DOM 2级 绑定中给元素事件绑定的方法, 都是在捕获阶段触发的
* + 默认是 false 冒泡阶段触发 从里 往外 inner =》 outer => box
* + 设置为true 捕获阶段触发 从外 往里 box =》 outer => inner
*/
// inner.addEventListener('click',function(ev){
// console.log('inner=>',ev);
// },true)
// outer.addEventListener('click',function(ev){
// console.log('outer=>',ev);
// },true)
// box.addEventListener('click',function(ev){
// console.log('box=>',ev);
// },true)
// inner.onclick = function(ev){
// //阻止冒泡
// // ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble();
// ev.stopPropagation();
// console.log('inner=>',ev);
// }
// outer.onclick = function(ev){
// ev.stopPropagation();
// console.log('outer=>',ev);
// }
// box.onclick = function(ev){
// ev.stopPropagation();
// console.log('box=>',ev);
// }
// document.body.onclick = function(ev){
// ev.stopPropagation();
// console.log('body=>',ev);
// }
// --------------------------------------------------
/**
* 由于点击事件行为存在冒泡传播机制,因此不论点击 box、outer、inner,最后都会
* 传递到 body 上, 触发body的 click 点击事件行为,把为其绑定的方法执行
*
* 在方法执行接收到的事件对象中,有一个 target/srcElement属性(事件源),能够知道当前点击的是谁,此时
* 方法中 能够根据事件源的不一样,作不一样的处理
* 这就是 “事件委托/事件代理”: 利用事件的冒泡传播机制,能够把一个容器中全部后代元素的某个
* 事件行为触发要作的操做,委托给当前容器的某个事件行为,后期只要触发任意后代元素,在方法执行的时候,
* 基于事件源 作不一样的处理
* + 性能高
* + 能够操做动态绑定的元素
* + 某些需求必须基于它完成
* + ...
* */
document.body.onclick = function(ev){
// console.log(ev);
let target = ev.target,
tgrgetClass = target.className;
// console.log(tgrgetClass); // inner
if(tgrgetClass === "inner"){
console.log('inner');
return;
}else if(tgrgetClass === "outer"){
console.log('outer');
return;
}else if(tgrgetClass === "box"){
console.log('box');
return;
}
}
</script>
</body>
</html>