当前位置: 首页 > 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…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...