事件处理模型---事件冒泡、捕获

489 阅读1分钟
.wrapper{
            width:300px;
            height:300px;
            background-color:crimson;
        }
        .content{
            width:200px;
            height:200px;
            background-color:cyan;
        }
        .box{
            width:100px;
            height:100px;
            background-color:rgb(51, 255, 0);
        }
        </style>
    </head>
    
    <body>
        <div class="wrapper">
            <div class="content">
                <div class="box"></div>
            </div>
        </div>
        <script type="text/javascript">

一个对象的一个事件类型绑定一个处理函数只能遵循一种处理模型

事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)-----false
事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素).(自顶向下)--true

IE没有捕获事件

触发顺序,先捕获,后冒泡

focus,blur,change,submit,reset,select等事件不冒泡

例1

var wrapper=document.getElementsByClassName('wrapper')[0];
var content=document.getElementsByClassName('content')[0];
var box=document.getElementsByClassName('box')[0];

事件3,冒泡-06-22 195641.jpg

事件3,捕获-06-22 195546.jpg

// 一个事件类型绑定两个处理函数,分别遵循捕获true和冒泡false事件类型

// 顺序1
wrapper.addEventListener('click',function(){
    console.log('wrapperBubble')
},false);
content.addEventListener('click',function(){
    console.log('contentBubble')
},false);
box.addEventListener('click',function(){
    console.log('boxBubble')
},false);
// 顺序2
wrapper.addEventListener('click',function(){
    console.log('wrapper')
},true);
content.addEventListener('click',function(){
    console.log('content')
},true);
box.addEventListener('click',function(){
    console.log('box')
},true);

事件3先捕获后冒泡-06-22 210138.jpg

// box区域是两个事件执行,符合谁先绑定谁先执行,

// 所以当顺序1在顺序2前面的时候点击box会出现以下情况boxBubble后面才是box(但是我的为啥和教程不一样?)

// 当顺序1在顺序2后面的时候点击box先捕获后冒泡