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---事件传播？
最佳答案
0
我用你的代码测试了下，你的代码现在是有问题的。
把下图中的地方修改下(var和变量之间没有空格)：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
修改后输出的顺序和你现在的顺序完全不一样，你看看自己能不能自己搞定那2个问题。
如果不行，我继续更新。
奖励园豆：5
我看出来啦，网上粘的代码，因为不报错也没注意到，理解啦，多谢。
@lilian'sblog: 好的，帮我结个帖吧！！！