首页 / JAVASCRIPT / JS的冒泡事件如何使用
JS的冒泡事件如何使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS的冒泡事件如何使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2677字，纯文字阅读大概需要4分钟。
内容图文
这次给大家详细的介绍一下冒泡事件，冒泡事件是什么，以及冒泡事件改如何使用，下面给大家带来实例演示，一起来看一下 。冒泡事件
(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>相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
JS引擎运行时是什么样的
AJAX使用中的异步同步请求怎么实现
js代码案列-根据日期计算星期几
以上就是JS的冒泡事件如何使用的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JS的冒泡事件如何使用全部内容，希望文章能够帮你解决JS的冒泡事件如何使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。