<!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说
TA贡献1775条经验 获得超8个赞
我用你的代码测试了下，你的代码现在是有问题的。
把下图中的地方修改下(var和变量之间没有空格)：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
修改后输出的顺序和你现在的顺序完全不一样，你看看自己能不能自己搞定那2个问题。
添加回答
举报
0/150
提交
取消