首页新闻找找看学习计划

JS事件机制,求解释输出

0
[已解决问题] 解决于 2018-03-21 10:55

```

<!DOCTYPE html>
<html>

<head> <title>js事件机制</title>
<style>
#parent {
width: 200px;
height: 200px;
text-align: center;
line-height: 3;
background: green;
}

#child {
width: 100px;
height: 100px;
margin: 0 auto;
background: orange;
}

</style>
</head>

<body>
<div id="parent">父元素
<div id="child" 子元素> </div>
</div>
<script type="text/javascript">

//捕获方式:先找捕获方式,再冒泡 输出 :click-parent--事件捕获 、click-child、click-body、click-parent---事件传播
varparent = document.getElementById("parent");
varchild = document.getElementById("child");


//捕获阶段
parent.addEventListener("click", function (e) {
alert("click-parent--事件捕获");
}, true);
//目标阶段
child.addEventListener("click", function (e) {
alert("click-child");
}, false);

parent.addEventListener("click", function (e) {
alert("click-parent---事件传播");
}, false);

document.body.addEventListener("click", function (e) {
alert("click-body");
}, false);

</script>
</body>

</html>

```

问题一:点击子元素为什么click-body在click-parent---事件传播之前输出?

问题二:点击parent以外body元素,会输出click-parent--事件捕获、click-body、click-parent---事件传播?

lilian'sblog的主页 lilian'sblog | 菜鸟二级 | 园豆:206
提问于:2018-03-20 08:41
< >
分享
最佳答案
0

我用你的代码测试了下,你的代码现在是有问题的。

把下图中的地方修改下(var和变量之间没有空格):

var  parent = document.getElementById("parent");

var  child = document.getElementById("child");

修改后输出的顺序和你现在的顺序完全不一样,你看看自己能不能自己搞定那2个问题。

如果不行,我继续更新。

奖励园豆:5
Mad_Rabbit | 菜鸟二级 |园豆:305 | 2018-03-20 15:26

我看出来啦,网上粘的代码,因为不报错也没注意到,理解啦,多谢。

lilian'sblog | 园豆:206 (菜鸟二级) | 2018-03-20 19:25

@lilian'sblog: 好的,帮我结个帖吧!!!

Mad_Rabbit | 园豆:305 (菜鸟二级) | 2018-03-21 09:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册