day-14.3 事件冒泡

事件冒泡:子元素联动父元素执行鼠标事件的事件函数就叫冒泡事件；

 1             #wrap {
 2                 width: 200px;
 3                 height: 200px;
 4                 background-color: pink;
 5             }
 6             .box {
 7                 width: 100px;
 8                 height: 100px;
 9                 background-color: black;
10             }
11         
12         </style>
13     </head>
14     <body>
15         <div id="wrap">
16             <div class="box">
17 
18             </div>
19         </div>
20         
21         <script> //点击一个的box的时候，输出3个(box.wrap.document)，点击wrap,输出2个(wrap.document)，点击文档，只输出document.
22             var oWrap = document.getElementById("wrap");
23             oWrap.onclick = function () {
24                 console.log("wrap");
25             };
26             oWrap.children[0].onclick = function () {
27                 console.log("box");
28             };
29             document.onclick = function () {
30                 console.log("document")
31             };
32         </script>
33     </body>

这个就是事件冒泡，

事件冒泡的基本原理是基于Dom的树结构，即Dom树结构的根是document,对document内的任一元素的点击事件都会联动document的点击事件，而wrap又是box的上级结构，所以对box的点击会联动到wrap和document,

冒泡是树层结构的根往子去传递，即根父级元素将事件给子级的实参，传进去，由子级最终实现全部输出，

是一个树的一层一层的传递关系，也就是说，如果想触发鼠标事件函数的时候，不传递根父级的参数的话，在子级取消冒泡传递就可以了；

1 oWrap.onclick = function () {
2                 console.log("wrap");
3                 oWrap.stopPropagation(); //上述例子里面加一个这个阻止冒泡的函数就可以了；
4             };

兼容IE的写法：

1 oWrap.cancelBubble = true ; //默认是false，关闭冒泡，true开启冒泡；
1 if(oWrap.stopPropagation){
2     oWrap.stopPropagation();
3 }else{
4     oWrap.cancelBubble = true ;
5 }

 

posted @ 2018-06-26 15:43  bibiguo  阅读(85)  评论(0)    收藏  举报