按关键词阅读:

文章图片

javascript事件基础-事件流事件
1.冒泡型
事件从上向下进行响应 , 称冒泡
实例1.含五层嵌套的Div标签 , 当点击Div事件时 , 对象边框边红色 , 并抓取标签名 。
代码演示浏览结果点击click事件 , 从内到外一次响应 。
完整代码
<!doctype html>
<html>
<head>
<meta charset=\"UTF-8\">
<title>Document</title>
<style type=\"text/css\">
div{
margin:20px;
border:solid 1px blue;
font-size:18px;
</style>
<script>
function Bubble() {
var div=document.getElementsByTagName('div');
var show=document.getElementById(\"show\");
for(var i=0;i<div.length;i++) //遍历Div元素
{ div[i
.onclick=(function(i)
{ return function(){ //返回闭包函数
div[i
.style.border='1px dashed red'; //点击变红
show.innerHTML+=div[i
.className+\">\";//标识响应顺序
)(i);
window.onload=Bubble;
</script>
</head>
<body>
<div>div-1
<div>div-2
<div>div-3
<div>div-4
<div>div-5
</div>
</div>
</div>
</div>
</div>
<p id=\"show\"></p>
</body>
【javascript|javascript事件基础-冒泡型事件流】</html>

来源:(镇上宝塔)
【】网址:/a/2021/0215/kd711793.html
标题:javascript|javascript事件基础-冒泡型事件流