当前位置: 首页 > news >正文

【基础类】—DOM事件系统性学习

一、基本概念:DOM事件的级别

// DOM0
element.onclick=function(){}
// DOM2, 新增了冒泡和捕获
element.addEventListener('click',function(){}, false)
// DOM3, 新增更多事件类型 鼠标、键盘等
element.addEventListener('keyup',function(){}, false)

二、DOM事件模型

捕获和冒泡

三、DOM事件流

事件流:浏览器再页面做交互的过程中,比如点击鼠标左键,这个左键如何传递到页面上,就是事件流
完整事件流: 捕获 → 目标阶段 → 冒泡

四、描述DOM事件捕获的具体流程

  1. 事件捕获:是从上到下的过程
  2. 第一个接收事件的对象是window
  3. 具体流程: window → document → html → body → … (按照html结构往下传递) → 目标元素
<!-- 模拟DOM时间的捕获的具体流程 --><div id="eve"><style>#eve {width: 100px;height: 100px;background-color: aqua;text-align: center;line-height: 100px;font-size: 20px;}</style>目标元素</div><script type="text/javascript">var ev = document.getElementById('eve');ev.addEventListener('click', function() {console.log('目标元素');}, true);document.body.addEventListener('click', function() {console.log('body');}, true);document.addEventListener('click', function() {console.log('document');}, true);window.addEventListener('click', function() {console.log('window');}, true);document.documentElement.addEventListener('click', function() {console.log('html');}, true);</script>

在这里插入图片描述

  1. 如何使用js获取html节点:document.documentElement

五、Event对象的常见应用

  1. event.preventDefaylt() 阻止默认事件
    场景描述:比如有一个需求,再点击a标签时,做一些js逻辑,需要阻止a标签的跳转行为
  2. event.stopPropagation() 阻止事件冒泡
    场景描述:父元素绑定事件A和子元素绑定事件B,我希望点击子元素时,只触发事件B, 不需要往上冒泡触发父元素的事件A
  3. event.stoplmmediatePropagation() 阻止事件冒泡 + 阻止相同事件监听被调用
    场景描述:假设一个元素同时绑定两个click事件,再第一次执行click事件时,执行stoplmmediatePropagation,阻止冒泡的同时也阻止了第二个click时间
div.addEventListener("click" , function(){alert("第一次执行");stopImmediatePropagation();
} , true);
​
div.addEventListener("click" , function(){alert("第二次执行");
} , true);// 点击div,第二次执行不会触发
  1. event.currentTarget 获取绑定事件的DOM对象
    场景描述:给ul绑定事件,event.currentTarget 获取ul的dom对象

  2. event.target 获取实际触发事件的DOM对象
    场景描述:给多个li标签绑定click事件,一般情况下会循环li节点,给每一个li绑定事件。这种情况会消耗大量的性能,可以通过事件委托的方式,把所有li事件绑定到一个ul上,通过event.target获取具体是哪一个li被点击

六、自定义事件(模拟事件)

  1. Event 自定义事件
var eve = new Event('custome');  // 声明一个自定义事件对象
var dom = document.getElementById("dom");
// 给dom节点绑定自定义事件
dom.addEventListener('custome',function(){console.log('custome')
})
// 触发自定义事件
dom.dispatchEvent(eve)
// custome
  1. CustomEvent 自定义事件,可待参数
var eve = new CustomEvent('custome', {detail: {name: '张三', phone: '13751032412'}}); // 声明一个自定义事件对象, 允许加参数
var dom = document.getElementById("dom");
// 给dom节点绑定自定义事件
dom.addEventListener('custome',function(e){console.log('参数', e.detail)
})
// 触发自定义事件
dom.dispatchEvent(eve)
// 参数 {name: '张三', phone: '13751032412'}

相关文章:

【基础类】—DOM事件系统性学习

一、基本概念&#xff1a;DOM事件的级别 // DOM0 element.onclickfunction(){} // DOM2, 新增了冒泡和捕获 element.addEventListener(click,function(){}, false) // DOM3, 新增更多事件类型 鼠标、键盘等 element.addEventListener(keyup,function(){}, false)二、DOM事件模…...

【控制项目风险经验之谈】

项目风险是指在项目执行期间可能会影响项目目标、进度、成本或质量的不确定因素。在项目管理中&#xff0c;项目风险是不可避免的&#xff0c;因此需要采取措施来控制和管理项目风险。本篇文章将详细介绍如何控制项目风险的经验之谈。 一、确定风险管理计划 在项目启动阶段&a…...

SpringBoot复习:(10)SpringApplication中的initializer成员变量是怎么初始化的?

initializers成员变量定义如下&#xff1a; 在构造方法里通过setInitializers setInitializers的代码很简单&#xff1a; 其中的参数通过getSpringFactoriesInstances来获取的&#xff0c;该方法的代码如下&#xff1a; 其中调用的重载的方法代码如下&#xff1a; 它调用…...

Java三大特征之继承【超详细】

文章目录 一、继承概念二、继承的语法三、父类成员访问3.1子类中访问父类的成员变量3.2子类和父类成员变量同名3.3子类中访问父类的成员方法 四、super关键字五、子类构造方法六、super和this七、再谈初始化八、protected 关键字九、继承方式十、final 关键字十一、继承与组合 …...

python: lidar点云转BEV投影及pillar/voxel

点云BEV投影及pillar体素化 bev投影pillar/voxel bev投影 点云bev投影代码 pillar/voxel #!/usr/bin/env python # -*- encoding: utf-8 -*-import os import numpy as np import mathn_max_points_per_pillar 32 n_max_pillars 20736 # 144*144 20736 n_in_features 7…...

我的创作纪念日2023.8.5

机缘 在CSDN的创作开始于去年&#xff0c;创作的初衷是希望对自己的学习经历进行记录&#xff0c;同时也把自己的经验和收获传递给更多需要的小伙伴。创作博客的过程是一个将输入的知识进行再生产的过程&#xff0c;在此期间&#xff0c;知识获得了沉淀和提纯&#xff0c;思路…...

课程作业-基于Python实现的迷宫搜索游戏附源码

简单介绍一下 该项目不过是一个平平无奇的小作业&#xff0c;基于python3.8开发&#xff0c;目前提供两种迷宫生成算法与三种迷宫求解算法&#xff0c;希望对大家的学习有所帮助。 项目如果有后续的跟进将会声明&#xff0c;目前就这样吧~ 效果图如下所示&#xff1a; 环境…...

差值结构的相互作用能

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让A&#xff0c;B中各有3个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 其中有10组数据 差值结构 A-B 迭代次数 构造平均列 平均列…...

UI、UE、UX的区别

UI、UE、UX的区别 大部分程序员可能对UI、UE、UX这几个概念不是很熟悉,但在整个项目周期里,这些岗位还是很重要的,特别是对于产品公司,这些岗位对于一个产品是否能成功起着关键的作用。老规矩,我们先看看这三个缩写的定义。 UI:是User Interface英文的缩写,即用户界面的…...

RabbitMQ 教程 | 第10章 网络分区

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…...

Flask学习笔记_异步论坛(四)

Flask学习笔记_异步论坛&#xff08;四&#xff09; 1.配置和数据库链接1.exts.py里面实例化sqlalchemy数据库2.config.py配置app和数据库信息3.app.py导入exts和config并初始化到app上 2.创建用户模型并映射到数据库1.models/auth.py创建用户模型2.app.py导入模型并用flask-mi…...

K8S系列文章之 kubeasz部署K8S环境

自动化安装方式&#xff08;kubeasz&#xff09;* 生产环境推荐&#xff08;首次安装下载相关配置和安装包&#xff09;是基于Ansible实现的部署工具 简单介绍 每一具体k8s集群的详细配置参数文件 Ansible 任务配置文件 镜像安装包 安装部署步骤 前提 &#xff1a; 保证Ansib…...

nodejs和vue的关系--vue3教程

文章目录 总结性nodejs和vue的关系nodejs和vue产生关系的周边nodejs和vue的区别 总结性 vue是一套用于构建用户界面的前端框架&#xff0c;如果web项目中有前后端分离&#xff0c;前端项目想单独运行在服务器端&#xff0c;那么就要依赖nodeJs。 Vue的配套周边会和Node.js产生…...

前端大屏尺寸实现自适应屏幕大小

说在前面 目前很多业主在使用系统的时候都会有大屏的需求&#xff0c;很多屏幕并不会像我们开发的屏幕一样标准&#xff0c;比如1920*1080&#xff0c;这样我们就需要根据业主的屏幕尺寸进行适配&#xff0c;避免一些图表或文字在大屏中出现偏移&#xff0c;影响视觉观感。 方…...

leetcode 416. 分割等和子集

给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和 [11] 。 示例 2&a…...

cesium加载三维模型3dtiles

1.将数据和代码放到一个目录下 目的&#xff1a;为避免跨域 输入cmd命令 python3 -m http.server 5500 2.三维服务地址 http://127.0.0.1:5500/data/mars3d-max-shihua-3dtiles-master/tileset.json 3.模型网页地址 http://127.0.0.1:5500/cesium/cesium%E5%8A%A0%E8%BD%…...

el-select控制单选还是多选

<el-form :inline"true" :model"form" class"demo-form-inline"><el-form-item><el-select v-model"form.properties_id" placeholder"请选择样品性质" clearable :multiple"multiple_properties"…...

nginx使用

1 安装 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel yum install -y wget wget https://nginx.org/download/nginx-1.16.1.tar.gz tar -zxvf nginx-1.16.1.tar.gz cd nginx-1.16.1 ./configure --prefix/usr/local/nginx make make install2 目录 目录说…...

基于Jenkins+Python+Ubuntu+Docker的接口/UI自动化测试环境部署详细过程

基于JenkinsPythonUbuntuDocker的接口/UI自动化测试环境部署详细过程 1 Jenkins是什么&#xff1f;2 Jenkins目标是什么&#xff1f;3 什么是CI/CD?3.1 CI持续集成3.2 CD持续部署3.3 CD持续交付 4 Ubuntu环境4.1 环境需求4.2 实现思路 5 Ubuntu下安装Docker6 安装Jenkins6.1 拉…...

Linux|ubuntu下运行python

参考&#xff1a;ubuntu系统下切换python版本的方法 文章目录 python版本问题查看ubuntu下的所有python版本通过apt-get install可以安装不同版本python查看python版本号更新update-alternatives替代列表查看update-alternatives下的python版本切换python版本删除python版本 p…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...