DOM 事件冒泡

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: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById(‘btn‘);

            oBtn.setCapture();
            oBtn.onclick = function(){
                alert(‘1‘);
            }
        }
    </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()

  

      

时间: 2024-12-16 04:57:42

DOM 事件冒泡的相关文章

关于dom 事件冒泡、捕获 dom事件三个阶段

本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 温故了一下我的<JavaScript高级程序设计>的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞).想起了dom事件流原理,好多人不明白,只知道click mouseout等实用场景,真要理解和更进一步的前端是要必须:理论+实践 并行的. 当然,DOM事件所囊括的知识较为庞杂,所以本文专注与自己学习时所碰到的难点,DOM事件流. 流 流的概念,在现今的

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

Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡. DOM事件冒泡与Angular可以无缝工作,具体示例如下: im

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

Dom事件流、冒泡、捕获

Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点document→html→body→div这个顺序传播.(给这四个节点绑定事件,事件依次触发的顺序): 冒泡:div元素触发事件时,事件从div→body→html→document这个顺序传播. dom事件流:先捕获,再冒泡.从document开始,到document结束形成一个完整的事件流.

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

平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远

js事件捕获,事件冒泡,事件委托以及DOM事件流

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节

DOM事件机制(事件捕获和事件冒泡和事件委托)

内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接描述了所有事件:https://developer.mozilla.org/en-US/docs/Web/Events (2)事件绑定 事件绑定有3种方法,前两钟方法在这里不介绍,主要看第三种: addEventListener方法(使用事件监听绑定事件) addEventListener: 1 e

事件冒泡及事件委托的理解(JQuery Dom操作)

jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会触发事件,只是没有结果,事件冒泡传递还是会发生 系统自动产生的event事件对象 function传的第一个参数就是event事件对象 1 event.stopPropagation(); // 阻止事件冒泡 2 event.preventDefault() // 阻止默认行为 比如submit阻止

事件流(事件冒泡、事件捕获和DOM事件流)

事件流是用来描述html页面中接收事件的顺序的. IE给出的顺序叫做事件冒泡. Netscape给出的顺序叫做事件捕获. <!Doctype> <html> <body> <div id="btn">Click me</div> </body> </html> 事件冒泡正如其名,向鱼类吐泡泡一样.当点击上面div时,最先接收到click事件的是div元素本身.因为它是文本中当前所交互的元素里嵌套最深的那