码迷,mamicode.com
首页 > 其他好文 > 详细

【事件处理模型——事件冒泡、事件捕获】

时间:2020-01-14 09:15:23      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:log   调用   cat   event   console   get   bsp   doctype   事件处理   

 

事件冒泡:

  结构上,(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)

事件捕获:

  结构上,(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获向子元素。(自顶向下)

  IE没有捕获事件

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .a {
                width: 500px;
                height: 500px;
                background-color: #00008B;
            }
            .b {
                width: 400px;
                height: 400px;
                background-color: #00FFFF;
            }
            .c {
                width: 300px;
                height: 300px;
                background-color: #FFA500;
            }
        </style>
    </head>
    <body>
        <div class="a">
            <div class="b">
                <div class="c">
                    
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var a = document.getElementsByClassName(a)[0];
            var b = document.getElementsByClassName(b)[0];
            var c = document.getElementsByClassName(c)[0];

//第三个参数为false, 为冒泡事件 a.addEventListener(
click, function () { console.log(aBubble) }, false) b.addEventListener(click, function () { console.log(bBubble) }, false) c.addEventListener(click, function () { console.log(cBubble) }, false)

       // 将 false 改为 true , 为捕获事件 a.addEventListener(
click, function () { console.log(aCatch) }, true) b.addEventListener(click, function () { console.log(bCatch) }, true) c.addEventListener(click, function () { console.log(cCatch) }, true) </script> </body> </html>

运行代码,点击  c  的输出结果为:

aCatch
bCatch
cBubble
 cCatch
 bBubble
 aBubble

可以看出,是先执行了捕获事件,再执行冒泡事件,而被点击的 对象 c 则按事件的调用顺序执行。

【事件处理模型——事件冒泡、事件捕获】

标签:log   调用   cat   event   console   get   bsp   doctype   事件处理   

原文地址:https://www.cnblogs.com/hjysunshine/p/12190166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!