概述
事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。
注意:这里传递的仅仅是事件,并不传递所绑定的事件函数。
所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。
简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 600px;
height: 400px;
background-color: green;
margin: 0 auto;
}
#box2{
width: 300px;
height: 200px;
background-color: orange;
margin: 100px auto;
}
#box3{
width: 150px;
height: 100px;
background-color: royalblue;
margin: 50px auto;
}
</style>
</head>
<body>
<!--事件冒泡机制-->
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script type="text/javascript">
var oBox1 = document.getElementById("box1")
var oBox2 = document.getElementById("box2")
var oBox3 = document.getElementById("box3")
function fn1(){
// this在函数内部,指向调用它的那个对象,
// 通常如果函数前面没有对象调用,基本上指向windows
alert(this.id)
}
oBox1.onclick = fn1;
oBox2.onclick = fn1;
</script>
</body>
</html>
事件冒泡带来的影响
事件冒泡可能会产生事件冲突,下面举个例子(这是一个错误的示范):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div id="box"></div>
<script type="text/javascript">
var oBtn = document.getElementById("btn")
var oBox = document.getElementById("box")
oBtn.onclick = function(){
oBox.style.display = "block"
}
// 随着代码增多,有可能在document中加一个点击事件
document.onclick = function(){
// 隐藏box
oBox.style.display = "none"
}
</script>
</body>
</html>
事件冒泡的优点
每个事务都有他应该存在的道理,下面用一个例子来说明为什么要使用事件冒泡。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--事件冒泡是默认支持的机制,为什么要用到事件冒泡?-->
<!--事件源-->
<!--创建元素-->
<input type="text" id="ipt"/><button id="btn">添加</button>
<ul>
<li>adfafa</li>
<li>adfafa</li>
<li>adfafa</li>
</ul>
<script type="text/javascript">
var oIpt = document.getElementById("ipt")
var oBtn = document.getElementById("btn")
var oUi = document.getElementsByTagName("ul")[0]
// 绑定添加的事件
oBtn.onclick = function(){
var inputValue = oIpt.value
// 去创建一个li
var oLi = document.createElement("li")
// 给oLi添加内容
oLi.innerHTML = inputValue
// console.log(oLi)
// 把li元素放到ul里面去
oUi.appendChild(oLi)
}
//createElement,创建一个html元素
//appendChild,添加一个元素
// 需求:当点击所有的li的时候,让它变成红色
var aLi = document.getElementsByTagName("li")
// 给所有的li批量的绑定事件
// for(var i = 0;i<aLi.length;i++){
// aLi[i].onclick = function(){
// // this指向当前你点击的这个li
// this.style.color = "red"
// }
// }
// 带来问题:新添加的元素不能绑定上面事件
// 绑定不上事件的原因:循环先执行,添加元素后执行
// 如何解决:事件冒泡
oUi.onclick = function(ev){
// 让它改变li的字体颜色,给那个li设置?点击的那个li就设置那个li
// alert(ev.target.innerHTML)
// ev.target就是被点击的那个li
ev.target.style.color = "red"
}
// 事件委托:原来发生在li身上的事情,让它父亲来做
</script>
</body>
</html>