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. vue_cli下开发一个简单的模块权限系统之展现数据

    这个页面是用户列表:userList就是第二张截图中的data里面的userList vue中只要改变存放数据的载体就会实现页面改变,mounted的意思是页面加载时执行这里面的函数,我们需要在页面加 ...

  2. webpack热更新实现

    原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...

  3. AP_MergeSql

    ) FROM DELTA.PRMCN WHERE ETL_FLAG IN ('A','D')) S; --重跑:删除已跑入数据 DELETE FROM CCRD.PRMCN WHERE JOB_SEQ ...

  4. luogu4345 [SHOI2015]超能粒子炮·改(组合数/Lucas定理)

    link 输入\(n,k\),求\(\sum_{i=0}^k{n\choose i}\)对2333取模,10万组询问,n,k<=1e18 注意到一个2333这个数字很小并且还是质数这一良好性质, ...

  5. 数据结构19: BF算法(普通模式匹配算法)

    判断两个串之间是否存在主串与子串的关系,这个过程称为串的模式匹配. 在串的模式匹配过程,子串 T 通常被叫做“模式串”. 普通的模式匹配(“BF”算法) 判断两个串是否存在子串与主串的关系,最直接的算 ...

  6. kuangbin专题七 HDU1540 Tunnel Warfare （前缀后缀线段树）

    During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...

  7. js 遍历tree的一个例子

    小例子蕴含着到力量,我希望自己有改变自己生活的能力,自己有主宰自己命运的能力... 备注:这个例子有问题. <!DOCTYPE html> <html lang="en&q ...

  8. ssh免密登录linux服务器

    Ssh免密登录 sshd服务 sshd简介: SSH 密钥为登录 Linux 服务器提供了更好且安全的机制.运行 ssh-keygen 后,将会生成公私密钥对.你可以将公钥放置到任意服务器,从持有私钥 ...

  9. APP微信支付实现

    参考官方文档 设计到的API: 统一下单API.支付结果通知API和查询订单API 下面代码是请求预支付ID // 构建下单bean final WxPayUnifiedOrderBean unifi ...

  10. 轻量级RPC框架-motan

    https://github.com/weibocom/motan/wiki/zh_quickstart#%E7%AE%80%E5%8D%95%E8%B0%83%E7%94%A8%E7%A4%BA%E ...