DOM 的事件流
事件流分为三个阶段:捕获 ==》目标 ==》冒泡
1. 事件捕获阶段:事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根 节点 document(window)开始触发对象,最后传播到目标节点,从外向内捕获事件对象;
2 .处于目标阶段:事件到达目标对象,事件触发,如果事件不允许冒泡,事件会在这一 阶段停止传播;
3. 事件冒泡阶段:从目标节点逐级传播到 document 节点 , 从内到外;
ps:冒泡是事件委托的原理;
阻止冒泡的方式:
a) e.stopPropagation()
b) return false
DOM 的事件流的更多相关文章
- [已转移]IE事件流和DOM标准事件流的区别
该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
- [转]as3事件流机制彻底理解
题记: 看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能直观的理解事件流.而这篇教程以将事件流过程比喻成捕鱼过程,形象简单. 在此基础上对于as3事件流总算有了全面的理解.事件流机制说 ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 深入理解DOM事件机制系列第一篇——事件流
× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- 从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- DOM事件流
DOM事件标准定义了两种事件流:Capture(捕获)和Bubbing(冒泡):捕获和冒泡是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌 ...
随机推荐
- 基于禅道数据库对bug进行不同维度统计
工作中经常需要在周报.月报.年报对禅道bug数据进行不同维度统计导出,以下是我常用的统计sql 1.统计2022年每个月bug数(deleted='0'是查询未删除的bug) select DATE_ ...
- 【SpringCloud】Re04 Gateway
微服务网关: 1.身份认证 和 权限校验 2.服务路由.负载均衡 3.请求限流 搭建服务网关: 网关是一个独立的服务,同样需要被注册中心注册到,这里依然使用的是Nacos <?xml versi ...
- 使用SiliconCloud尝试GraphRag——以《三国演义》为例(手把手教程,适合小白)
使用OpenAI模型体验GraphRag--以<边城>为例 在使用SiliconCloud之前,先使用OpenAI的模型看看GraphRag的效果. GraphRAG是一种基于AI的内容理 ...
- 关于Springboot理解
面向对象五大基本原则 graph LR A(面向对象五大原则);B(单一职责原则);C(开放封闭原则);D(里式替换原则);E(依赖倒置原则);F(接口隔离原则); A---B;A---C;A---D ...
- BST 二叉搜索树 BinarySearchTree C++实现(递归/非递归)
目录 二叉搜索树 基本概念 常用结论 用途 二叉搜索树的性能分析 二叉搜索树的操作 查找 插入 删除 代码实现 BSTree.hpp test.cc 二叉搜索树 基本概念 二叉搜索树(BST,Bina ...
- 玄机蓝队靶场_应急响应_02:apache日志分析
日志分析这块,感觉都是对grep.awk.sort.wc.uniq,这几个命令的使用. 一:靶场 (1)直接cd到linux日志, cd /var/log 发现apache2目录, cd ./apac ...
- 甲方扔给两个存在包名与类名均相同的Jar包,要在工程中同时使用怎么办?
你的项目是否曾遇到过有jar包冲突,而这些冲突的jar包又必须同时存在的情况?一般来说,jar 冲突都是因不同的上层依赖项,自身又依赖了相同 jar 包的不同版本所致,解决办法也都是去除其中一个即可. ...
- Devexpress 控件学习记录(一:BarManager 控件、XtraTabbedMdiManager 控件)
BarManager 控件 最终实现的效果如下: 首先在窗体中拖出BarManager控件,窗体Bar add地方点击添加 设置BarManager的属性 设置出现的窗体的底部[DockStyle=B ...
- 使用 nuxi add 快速创建 Nuxt 应用组件
title: 使用 nuxi add 快速创建 Nuxt 应用组件 date: 2024/8/28 updated: 2024/8/28 author: cmdragon excerpt: 通过使用 ...
- MSYS2、MinGW、Cygwin 关系梳理
还记得大一刚开始写 C 代码时,经常看到 MSYS2.MinGW.Cygwin 等名词.对于第一次接触编程的我来说这些名词让我眼花缭乱.当时查阅了一些资料,但是对于这些名词的解释始终让我云里雾里.现在 ...