JS基础学习:事件冒泡/阻止事件冒泡/事件冒泡阶段

事件冒泡

多个元素嵌套，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件也自动触发了。

<div id="dv1">1
            <div id="dv2">2
                <div id="dv3">3</div>
            </div>
        </div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            my$('dv1').onclick=function(){
                console.log("点击dv1");
            };
            my$('dv2').onclick=function(){
                console.log("点击dv2");
            };
            my$('dv3').onclick=function(){
                console.log("点击dv3");
            };
        </script>

阻止事件冒泡

如何阻止事件冒泡：

• window.event.cancelBubble=true;
  IE特有的，火狐不支持，谷歌支持
• e.stopProgation();
  谷歌和火狐都支持，IE不支持

事件阶段

事件冒泡是从里岛外，事件有三个阶段：
1.事件捕获阶段：从外向内
2.事件目标阶段：最开始选择的
3.事件冒泡阶段：从里向外

addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
事件触发的过程中，可能会出现事件冒泡的效果，为了阻止事件冒泡：

• window.event.cancelBubble=true;谷歌，IE8都支持，火狐不支持
  window.event就是一个对象，是IE中的标准
• e.stopProgation()；阻止事件冒泡

window.event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准，事件参数e在IE8的浏览器中不存在，此时用window.event来代替。

addEventListener()第三个参数是控制事件阶段的

事件阶段有三个：
通过e.eventPhase这个属性可以知道当前的事件是什么阶段
1--->捕获阶段
2--->目标阶段
3--->冒泡阶段

一般默认都是冒泡阶段，很少用捕获阶段
冒泡阶段：从里到外
捕获阶段：从外向内