|
|
@@ -36,18 +36,23 @@
|
|
|
// }
|
|
|
|
|
|
oBox1.addEventListener("click",function(){
|
|
|
- console.log("3-box1")
|
|
|
+ console.log("4-box1")
|
|
|
},false)
|
|
|
- oBox2.addEventListener("click",function(){
|
|
|
- console.log("4-box2")
|
|
|
+ oBox2.addEventListener("click",function(e){
|
|
|
+ console.log("3-box2")
|
|
|
+ // 阻止事件冒泡
|
|
|
+ e.stopPropagation();
|
|
|
},false)
|
|
|
|
|
|
- oBox1.addEventListener("click",function(){
|
|
|
- console.log("1-box1")
|
|
|
- },true)
|
|
|
- oBox2.addEventListener("click",function(){
|
|
|
- console.log("2-box2")
|
|
|
- },true)
|
|
|
+ // 事件捕获
|
|
|
+ // 事件捕获：事件从文档的根元素（html标签）开始，然后逐步向下捕获到触发事件的元素，直到到达目标元素。
|
|
|
+ // 事件捕获的过程中，事件处理函数会按照元素的层级关系，从外到内依次执行。
|
|
|
+ // oBox1.addEventListener("click",function(){
|
|
|
+ // console.log("1-box1")
|
|
|
+ // },true)
|
|
|
+ // oBox2.addEventListener("click",function(){
|
|
|
+ // console.log("2-box2")
|
|
|
+ // },true)
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
