1.什么是事件冒泡？

　　事件冒泡就是从具体到不具体，

　　例如：当你给了一个button按钮一个点击事件，再给他的父级相同的事件，就会按照，button，body，document，window，继续向上冒泡。

2。什么是事件捕获？

　　从不具体到具体，跟事件冒泡刚好相反。window document body button 。

　　例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: ;

            padding: ;

            list-style: none;

        }

        #box {

            width: 100px;

            height: 100px;

            background: red;

            position: absolute;

            left: ;

            top: ;

        }

    </style>

    <script>

        window.onload = function () {

            var oBtn = document.getElementById('btn');

            oBtn.setCapture();

            oBtn.onclick = function(){

                alert('');

            }

        }

    </script>

</head>

<body>

<input type="button" value="按钮" id="btn">

</body>

</html>

3.Dom事件流包括三个阶段。

　　1.>事件捕获阶段

　　2.>处于目标阶段

　　3.>事件冒泡阶段

4.事件捕获阶段

　　window.addEventListener('click',function(){

　　

},true)

为true代表事件使用事件捕获模式，false则代表使用事件冒泡

5.阻止事件冒泡    stopPropagation()

　　

　　　　　　

DOM 事件冒泡的更多相关文章

  1. DOM事件-冒泡、捕获、传播、委托

    事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...

  2. Angular4.x Event (DOM事件和自定义事件)

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...

  3. DOM 事件流与事件处理程序

    ㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序   ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...

  4. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  5. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...

  6. 事件冒泡及事件委托的理解（JQuery Dom操作）

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  7. dom阻止事件冒泡

    通常有两种事件流模型,一种是冒泡,一种是捕获.顾名思义,冒泡就是从内往外传播,捕获就是从外往里传播. 对于dom事件,就是这样的.比如,有两个父子div. <div id="pdiv& ...

  8. DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

    平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...

  9. w3c标准 dom对象 事件冒泡和事件捕获

    http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...

随机推荐

  1. git配置项目

    1.下载安装完git 2.在git oschina上发布项目 3.管理-公匙管理 4.git上面生成公匙 $ cat ~/.ssh/id_rsa.pub 5.将公匙复制进 git oschina 管理 ...

  2. dede地图显示最新文章的解决方法

    以DEDECMS5.6为例:sitemap.htm 在/templets/plus/目录里,就算添加了织梦相关标签调用,但却不能显示文章. 这是因为makehtml_map.php不能解析织梦的相关调 ...

  3. P1415 拆分数列

    传送门 DP数列长度过大无法枚举,考虑DP设f1[i]储存以第i个字符为结尾时,的最后一个数最小时,这个数的开头的位置(很难想有木有)OK,状态有了,方程想一想就出来了:设$num[i][j]$为数列 ...

  4. hdu2064 汉诺塔Ⅲ（递归）

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  5. CF 520 B. Two Buttons(bfs)

    /*题意:一个数,就是输入的第一个数,让它变成第二个数最少用几步.可以点红色按钮,蓝色按钮来改变数字,红色:*2,蓝色:-1,如果变成负数,就变成原来的数.CF 520 B. Two Buttons思 ...

  6. jupyter notebook初步使用

    Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特性,以 ...

  7. 基于wireshark抓包分析TCP的三次握手

    1. TCP的三次握手 在TCP/IP协议通讯过程中,采用三次握手建立连接,从而保证连接的安全可靠. 所有基于TCP的通信都需要以两台主机的握手开始.这个握手过程主要是希望能达到以下不同的目的.[1] ...

  8. Autel MaxiSys Pro MS908P

    Autel MaxiSys pro MS908P is an evolutionary smart solution for specialized automotive diagnosis and ...

  9. 安装Office 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    今天安装office2013的时候总是过会就提示找不到OfficeLR.cab文件 在网上找了好多方法不行,后来将注册表里的office选项全部删除就可以了(HKEY_CURRENT_USER\Sof ...

  10. Searching the Web论文阅读

    Searching the Web   (Arvind Arasu etc.) 1. 概述 2000年,23%网页每天更新,.com域内网页40%每天更新.网页生存半衰期是10天.描述方法可用Pois ...