JS的冒泡事件如何使用
- php中世界最好的语言原创
- 2017-12-04 14:43:442247浏览
这次给大家详细的介绍一下冒泡事件，冒泡事件是什么，以及冒泡事件改如何使用，下面给大家带来实例演示，一起来看一下 。
冒泡事件
(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.onload=function(){
var box1=document.getElementById("box1");
var s1=document.getElementById("s1");
var body=document.body;
//冒泡就是后代元素的事件被触发的时候，其祖先元素的相同事件也会被触发；冒泡是向上导向的
//如果我们不需要冒泡,可以通过事件对象来取消冒泡;
box1.onclick=function(){
alert("box1");
}
s1.onclick=function(event){
//
event.cancelBubble=true;//可以通过cancelBubble
alert("s1");
}
body.onclick=function(){
alert("body");
}
};
</script>
</head>
<body>
<p id="box1">
我是p
<span id="s1">我是span</span>
</p>
</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.onload=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].onclick=function(){
// alert("超链接");
// };
// }
bnt01.onclick=function(){
//创建超链接；
var li=document.createElement("li");
li.innerHTML="<a href='#' class='sn'>新建超链接</a>";
ul.appendChild(li);
}
ul.onclick=function(event){
//只有点击超链接的时候才执行，其他的地方不执行;
if(event.target.className=="sn")
alert("超链接");
}
};
</script>
</head>
<body>
<button id="btn01">创建一个超链接</button>
<p 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>
</p>
</body>
</html>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是JS的冒泡事件如何使用的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn