事件的传播和阻止

   <div id="box">

        <div id="middle">

            <div id="inner"></div>

        </div>

    </div>

    <script>

        // 事件的传播和阻止

        // 事件的传播

        //     当点击后代标签时,会触发,所有父级标签,相同类型的事件

        // 执行顺序,都是从当前标签向父级元素执行,也就是先执行当前标签的事件,再逐一执行父级标签的是事件

        // 捕获顺序,当前标签触发事件,会寻找父级标签上,相同的事件类型,触发一起执行

        //         方式1 : 冒泡机制: IE浏览器    从 子级开始,向父级获取具有的相同事件类型

        //         方式2 : 捕获机制: 非IE浏览器  从 父级开始,向子级获取具有的相同事件类型

        // 但是现在执行时,顺序都是 从 当前标签 至 父级标签

        // 阻止事件的传播

        //     普通浏览器

        //         e.stopPropagation();

        //     低版本IE浏览器

        //         e.cancelBubble = true;

        // 谁写谁阻止,谁不触发父级

        // 谁不写,谁会触发父级

        // 大部分事件传播都是需要阻止的

        // 只有特殊情况下,才会允许事件的传播

        // 使用if判断做兼容处理

        /*

            if(e.stopPropagation){

                e.stopPropagation();

            }else{

                e.cancelBubble = true;

            }

        

        */

        

        // 三个div,是嵌套关系  box > middle > inner

        // 都添加了相同的事件类型 click

        // 点击效果:

        // 最外层div : 只触发自己身上绑定的事件

        // 中间层div : 触发自己身上绑定的事件,同时触发父级身上,绑定的相同类型的事件

        //             只会向外传播,也就是向父级传播,不会向内传播,也就是子级传播

        // 最内层div : 触发自己身上绑定的事件,同时触发所有父级身上,绑定的相同类型的事件

        var oBox = document.getElementById('box');

        var oMiddle = document.getElementById('middle');

        var oInner = document.getElementById('inner');

        // oBox.addEventListener('click' , function(){

        //     console.log('我是box,div触发的事件')

        // });

        // oMiddle.addEventListener('click' , function(){

        //     console.log('我是middle,div触发的事件')

        // });

        // oInner.addEventListener('click' , function(){

        //     console.log('我是inner,div触发的事件')

        // });

        oBox.onclick = function(e){

            e = e || window.event;

            // if(e.stopPropagation){

            //     e.stopPropagation();

            // }else{

            //     e.cancelBubble = true;

            // }

            console.log('我是box,div触发的事件');

            console.log(e);

        }

        oMiddle.onclick = function(e){

            e = e || window.event;

            // if(e.stopPropagation){

            //     e.stopPropagation();

            // }else{

            //     e.cancelBubble = true;

            // }

            console.log('我是middle,div触发的事件');

            console.log(e);

        }

        oInner.onclick = function(e){

            e = e || window.event;

            // if(e.stopPropagation){

            //     e.stopPropagation();

            // }else{

            //     e.cancelBubble = true;

            // }

            console.log('我是inner,div触发的事件');

            console.log(e);

        }

        // 总结:

        // 事件的传播 : 当前标签会触发父级标签相同类型的事件的执行

        // 阻止事件的传播:

        /*

            if(e.stopPropagation){

                e.stopPropagation();

            }else{

                e.cancelBubble = true;

            }

        */

        // 事件传播的捕获

        //     1,冒泡机制 : IE浏览器执行机制   从当前标签开始,找父级元素中相同类型的事件

        //     2,捕获机制 : 非IE浏览器执行机制 从父级标签开始,找后盾元素中相同类型的事件

        // 执行顺序

        //     都是从当前标签开始 向父级执行