2019完工荒了两天，赶忙最先！
为何写事宜代办、冒泡、捕捉，起首冒泡和捕捉是js事宜的中心基本，事宜代办道理来自冒泡和捕捉。
此文章略过规范浏览器和非规范浏览器的事宜流解说，缘由很简单我们如今已幸运了，已不斟酌IE6、7、8了
直接说当代浏览器事宜流，用两张图看看什么是冒泡 什么是捕捉，实在从字面意义也许能看出 一个是向外一个是向内。
规范事宜流
1、捕捉阶段 （先从最外层向内查找）
2、目的阶段（找到事宜元（当前点击的dom））
3、冒泡阶段（向上冒泡通报事宜）
事宜冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>冒泡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 30px;
}
.div1 {
background: red
}
.div2 {
background: blueviolet
}
.div3 {
background: yellowgreen
}
</style>
<body>
<div class="div1">
父
<div class="div2">
子
<div class="div3">
孙
</div>
</div>
</div>
<script>
// javascript事宜绑定addEventListener吸收三个参数，
// 1、事宜称号字符串且不带on
// 2、回调函数
// 3、事宜流体式格局（默以为冒泡（false），捕捉为true）
window.onload = function() {
document.querySelector('.div1').addEventListener('click', function() {
console.log('点击div1')
}, false)
document.querySelector('.div2').addEventListener('click', function() {
console.log('点击div2')
}, false)
document.querySelector('.div3').addEventListener('click', function() {
console.log('点击div3')
}, false)
}
</script>
</body>
</html>先演示下冒泡
事宜捕捉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>冒泡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 30px;
}
.div1 {
background: red
}
.div2 {
background: blueviolet
}
.div3 {
background: yellowgreen
}
</style>
<body>
<div class="div1">
父
<div class="div2">
子
<div class="div3">
孙
</div>
</div>
</div>
<script>
window.onload = function() {
document.querySelector('.div1').addEventListener('click', function(e) {
console.log('点击父元素')
}, true)
document.querySelector('.div2').addEventListener('click', function(e) {
console.log('点击子元素')
}, true)
document.querySelector('.div3').addEventListener('click', function(e) {
console.log('点击孙子元素')
}, true)
}
</script>
</body>
</html>看看结果
事宜托付
我明白的事宜托付的优点有两点
1、削减事宜绑定次数
2、能够给未知元素绑定事宜（比方动态衬着的List）
其道理就是应用事宜冒泡向外通报的特征，下面代码剖析一下：
一样疏忽低版本浏览器猎取当前target兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>冒泡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 30px;
border: 1px solid red
}
div span {
display: inline-block;
padding: 10px;
border: 1px solid blueviolet
}
</style>
<body>
<div class="div1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<script>
window.onload = function() {
document.querySelector('.div1').addEventListener('click', function(e) {
//回调函数e为事宜对象，朋友事宜对象能够猎取当前点击dom
console.log(e.target)
//猎取到当前事宜源（dom）后再去搞一些你想搞的事变就ok了
//搞事变代码
}, false)
}
</script>
</body>
</html>老例子，看看结果
末了趁便说一下事宜对象功用很全的，看下图能猎取到许多当前dom的周边，能够搞很多别的的事变。
感谢浏览，迎接吐槽！感谢！
