<!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---事件傳播?
JS事件機制,求解釋輸出
躍然一笑
2018-08-09 05:10:04