1，事件冒泡，事件捕获
百度到的事件冒泡：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。
理解：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
代码实践：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
#box1{
width: 300px;
height: 300px;
background: #eee;
position: relative;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
}
#box2{
width: 200px;
height: 200px;
background: rgb(196, 142, 142);
position: relative;
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
#box3{
width: 100px;
height: 100px;
background: rgb(63, 173, 118);
position: relative;
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
<script>
function say1(){
console.log(1)
}
function say2(){
console.log(2)
}
function say3(){
console.log(3)
}
document.getElementById('box1').addEventListener("click",say1,false)
document.getElementById('box2').addEventListener("click",say2,false)
document.getElementById('box3').addEventListener("click",say3,false)
</script>
</html>
点击最里面的元素box3
点击box2
点击box1
可以发现当点击子元素时，click事件会向上冒泡，触发上一层父元素的click事件，直到document为止
在上面的列子中注册事件时是这样写的
document.getElementById('box1').addEventListener("click",say1,false)
document.getElementById('box2').addEventListener("click",say2,false)
document.getElementById('box3').addEventListener("click",say3,false)
其中的false代表的就是事件冒泡，如果是true就是事件捕获，默认是false；假如修改成true会怎么样呢？
当点击最里面的元素控制台输出
所以冒泡机制是从里向外触发事件，捕获机制是从外向里触发事件
那么能阻止事件冒泡吗
在需要阻止的事件函数里加上
event.stopPropagation();
上面列子box3阻止冒泡修改say3函数
function say3(event){
console.log(3)
event.stopPropagation();
}
结果点击box3时控制台只输出3
另外ie中事件对象是window.event，所以写法有所区别
2，事件委托
事件委托又称之为事件代理，简单来说就是利用事件冒泡，通过监听一个父元素，来给不同的子元素绑定事件。
假如有一个ul元素里面有许多li元素，我们就可以通过给ul元素绑定事件从而达到给每个li元素绑定事件的目的
html:
<ul id="my_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
js:
document.getElementById('my_ul').addEventListener('click',function(event){
console.log(event.target.innerText)
})
当我们点击li元素时就会触发my_ul中的click事件，同时控制台就输出了对应得li里面得数字
网友评论