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. html二

    超链接 超链接有三种形式: 1.外部链接:链接到外部文件.举例: <a href="new.html">点击进入到新网页</a> a是英语anchor“锚” ...

  2. Python脚本开发练习

    打印乘法口诀表 #!/usr/bin/python #coding=utf-8 print("Hello,World....") print("你好,欢迎来到Python ...

  3. 浅谈python web框架django2.x

    1.Django简介 Python下有多款不同的 Web 框架,Django是最有代表性的一种.许多成功的网站和APP都基于Django. Django是一个开源的Web应用框架,由Python写成. ...

  4. CF959E Mahmoud and Ehab and the xor-MST 思维

    Ehab is interested in the bitwise-xor operation and the special graphs. Mahmoud gave him a problem t ...

  5. Centos6.8 yum安装LNMP

    1.Centos6系统库中默认是没有nginx的rpn包的,所以我们需要先更新下rpm依赖库 (1):使用yum安装nginx,安装nginx库 rpm -Uvh http://nginx.org/p ...

  6. Kibana6.x.x——导航权限控制入门

    按如下图所示设置: 用该用户登录后,界面如图所示: 但遗憾的是,根据官方论坛的说法,其它的导航隐藏控制,暂时还不支持. 参考:https://discuss.elastic.co/t/hide-ina ...

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_IL和验证

    1.IL 基于栈——所有指令压入一个执行栈,并从栈弹出结果. 2.IL 指令无类型——指令会判断栈中操作数的类型,并执行恰当的操作. 3.IL 最大优势——应用程序的健壮性和安全性. 将 IL 编译成 ...

  8. C#中web项目使用log4net日志

    我准备把log4net的实现方法放在一个类库项目中,别的项目直接引用该类库,即可进行日志的记录,操作步骤如下: 1.下载log4net.dll文件 2.在解决方案下创建类库项目 3.把log4net. ...

  9. 2015苏州大学ACM-ICPC集训队选拔赛（1） 1006

    取金币 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissio ...

  10. 10-排序5 PAT Judge （25 分）

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...