冒泡事件
(1)冒泡就是后代元素的事件被触发的时候,其祖先元素的相同事件也会被触发;冒泡是向上导向的;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: #00BFFF;
}
#s1{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var box1=document.getElementById("box1");
var s1=document.getElementById("s1");
var body=document.body;
//冒泡就是后代元素的事件被触发的时候,其祖先元素的相同事件也会被触发;冒泡是向上导向的
//如果我们不需要冒泡,可以通过事件对象来取消冒泡;
box1.οnclick=function(){
alert("box1");
}
s1.οnclick=function(event){
//
event.cancelBubble=true;//可以通过cancelBubble
alert("s1");
}
body.οnclick=function(){
alert("body");
}
};
</script>
</head>
<body>
<div id="box1">
我是div
<span id="s1">我是span</span>
</div>
</body>
</html>
//冒泡的练习;
事件的委派
事件的委派:通过冒泡的方式来解决,多次创建响应事件的问题,我们可以对同一事件的祖先元素绑定,通过冒泡来解决,后代元素绑定事件的问题;
Event 事件对象的target属性用来表示触发事件对象;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 400px;
height: 200px;
background-color: aquamarine;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
//获取超链接
var ul=document.getElementById("s1");
var lias=document.getElementsByTagName("a");
var bnt01=document.getElementById("btn01");
//为a绑定一个事件
// for(var i=0;i<lias.length;i++)
// {
// lias[i].οnclick=function(){
// alert("超链接");
// };
//
// }
bnt01.οnclick=function(){
//创建超链接;
var li=document.createElement("li");
li.innerHTML="<a href='#' class='sn'>新建超链接</a>";
ul.appendChild(li);
}
ul.οnclick=function(event){
//只有点击超链接的时候才执行,其他的地方不执行;
if(event.target.className=="sn")
alert("超链接");
}
};
</script>
</head>
<body>
<button id="btn01">创建一个超链接</button>
<div class="box1">
<ul id="s1" style="background-color:red ;">
<li><a href="#" class="sn">超链接一</a></li>
<li><a href="#" class="sn">超链接二</a></li>
<li><a href="#" class="sn">超链接三</a></li>
</ul>
</div>
</body>
</html>