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. IE兼容css3圆角的htc解决方法

    IE兼容css教程3圆角的htc解决方法 现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的是IE6/7/8并不支持,让我们弃新技术不用,是不 ...

  2. 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题

    不多说,直接上干货,这个问题一直迷惑已久,今天得到亲身醒悟. 所以,建议hadoop-2.6.0.tar.gz的用户与hive-1.0.0搭配使用.当然,也可以去用高版本去覆盖它. log4j:WAR ...

  3. list与str互转

    import stringstr = 'abcde' list = list(str)list['a', 'b', 'c', 'd', 'e']str'abcde'str_convert = ''.j ...

  4. js 点击页面出现烟花 心形

    css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...

  5. 三嫖客之awk

    awk '{h[$1]++}END{for(pol in h)print pol,h[pol]}' access.log |sort -rnk2|head awk -F: -vOFS=":& ...

  6. C语言变参函数的实现原理

    1. 变参函数简单示例 #include <stdarg.h> #include <stdio.h> int Accumlate(int nr, ...) { ; ; va_l ...

  7. 单点登录-JWT(Json Web Tokens)

    来自:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html 1.跨域认证 1.用户向服务器发送用户名和密码. 2.服务 ...

  8. python模块之numpy

    Numpy是一个第三方库,是数组相关的运算 通过pip安装:pip install numpy Anaconda python的一个科学计算发行版本,安装后将不必单独安装numpy,下面的库模块也将不 ...

  9. matlab的一些关于块分类的函数~~~

    1. nlfilter(General sliding-neighborhood operations) B = nlfilter(A, [m n], fun),这是一个其中A是图像[m  n]是图像 ...

  10. B树与B+

    简单剖析B树(B-Tree)与B+树https://blog.csdn.net/z_ryan/article/details/79685072 B树和B+树的插入.删除图文详解https://www. ...