事件传播机制-事件捕获-事件-冒泡-事件委托

<!DOCTYPE html>

<head>

<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>

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>

我是Eric,手机号是13522679763

原文地址：https://www.cnblogs.com/eric-share/p/15078978.html