031事件的冒泡

最新推荐文章于 2024-05-05 22:41:50 发布

Manta__

最新推荐文章于 2024-05-05 22:41:50 发布

阅读量92

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Manta__/article/details/104973567

版权

JavaScript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!--事件冒泡-->
　<!DOCTYPE html>
　<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title></title>
　　　　<style type= "text/css">
　　　　　　#box1{
　　　　　　　　　width: 160px;
　　　　　　　　　height: 100px;
　　　　　　　　　background-color: yellowgreen;
　　　　　　}
　　　　　　#s1{
　　　　　　　　　background-color: yellow;
　　　　　　}
　　　　</style>
　　　　<script type="text/javascript">
　　　　　　window. onload = function(){
　　　　　　　/*事件的冒泡(Bubble)
　　　　　　　一所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时， 其祖先元素的相同事件也会被触发
　　　　　　　　在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
　　　　　　　＊／
　　　　　　//为s1绑定一个 单击响应函数
　　　　　　var s1 = document. getElementById("s1");
　　　　　　s1.onclick = function(){
　　　　　　alert(" 我是span的单击响应函数" );
　　　　　　}
　　　　　　//为box1绑定-一个 单击响应函数
　　　　　　var box1 = document 。getElementById("box1");
　　　　　　box1.onclick = function(){
　　　　　　alert( “我是div的单击响应函数");
　　　　　　};
　　　　　　//为body绑定一个 单击响应函数
　　　　　　document.body .onclick = function(){
　　　　　　alert( “我是body的单 击响应函数”);
　　　　　　};
　　　　　　
　　　　　　//为s1绑定-一个 单击响应函数
　　　　　　var s1 = document .getElementById("s1");
　　　　　　s1. οnclick= function(event){
　　　　　　　　　event = event| |window. event;
　　　　　　　　　alert ( "我是span的单 击响应函数”);
　　　　　　　　　//取消冒泡
　　　　　　　　　//可以将事件对象的cancelBubble设置为true,即可取消冒泡
　　　　　　　　　event. cancelBubble = true;
　　　　　　}
　　　　</script>
</head>
<body>
　　<div id= "box1">
　　　　我是box1
　　　　<span id="s1">我是span</span>
　　</div>
</html>

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
031事件的冒泡

　<!DOCTYPE html>　<html>　　<head>　　　　<meta charset="utf-8">　　　　<title></title>　　　　<style type= "text/css">　　　　　　#box1{　　　　　　　　　width: 1...
复制链接

扫一扫