JS事件机制，求解释输出
<!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---事件传播？
跃然一笑1回答
-
www说
我用你的代码测试了下，你的代码现在是有问题的。把下图中的地方修改下(var和变量之间没有空格)：var parent = document.getElementById("parent");var child = document.getElementById("child");修改后输出的顺序和你现在的顺序完全不一样，你看看自己能不能自己搞定那2个问题。
随时随地看视频慕课网APP
相关分类
JavaScript