事件高级。
一、注册事件(绑定事件)
就是给元素添加事件
注册事件有两种方式:传统方式和方法监听注册方式
1
传统注册方式
方法监听注册事件
2、 addEventListener 事件监听方式
里面的事件类型是字符串,必定加引号,而且不带on
3、attachEvent 事件监听方式
4、注册事件兼容性解决方案
二、删除事件(解绑事件)
1、传统注册方式
eventTarget.οnclick= null;
2、方法监听注册事件
3、删除事件兼容性解决方案
三、DOM事件流
事件流描述的是从页面中接受事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
DOM事件流分三个阶段:
1、捕获阶段
2、当前目标阶段
3、冒泡阶段
事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到dom最顶层节点的过程。
注
实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave
四、事件对象
1、什么是事件对象
2、事件对象的使用语法
3、事件对象的兼容性方案
解决:e=e||window.event;
4、事件对象的常见属性和方法
this 返回的是绑定事件的对象(元素)
区别: e.target 点击了那个元素就返回那个元素 ;this 那个元素绑定这个点击事件,那么就返回谁
阻止默认行为事件 让链接不跳转 或者让提交按钮不提交
五、阻止事件冒泡
1、标准写法:利用事件对象里面的 stopPropagation()方法
2、阻止事件冒泡的兼容性解决方案
六、事件委托(代理、委派)
事件委托的原理:不是每个子节点单独设置时间监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
七、常用的鼠标事件
1、禁止鼠标右键菜单
contextmenu 主要控制应该合时显示上下文菜单,主要用于程序员取消默认的上下文菜单
2、禁止鼠标选中(selectstart 开始选中)
3、鼠标事件对象
event 对象代表事件的状态,跟事件相关的一系列信息的集合。新阶段我们是用鼠标事件对象 MouseEvent 和 键盘事件对象 KeyboardEvent
跟随鼠标的天使案例
鼠标移动事件:mousemove
八、常用的键盘事件
时间除了使用鼠标触发,还可以使用键盘触发
注意;
1、如果使用addEventListener 不需要加on
2、onKeypress 和前面两个区别是,他不识别功能键,比如左右箭头,shift等
3、三个事件的执行顺序是:keydown--keypress--keyup
2、键盘事件对象
注意:onkeydown 和 onkeyup 不区分字母大小写,onkeypress 区分字母大小写
在实际开发中,我们更多使用keydown和keyup,他能识别所有键
keypress 不识别功能键,但keyCode属性能区分大小写,返回不同的ASCLL值
模拟京东按键输入内容
模拟京东快递单号查询
注意:keydown 和keypress 在文本框里面的特点:他们两个触发时,文字还没有落入文本框中
keyup事件触发的时候,文字已经落入文本框中。
相关文章:

事件高级。
一、注册事件(绑定事件) 就是给元素添加事件 注册事件有两种方式:传统方式和方法监听注册方式 1 传统注册方式 方法监听注册事件 2、 addEventListener 事件监听方式 里面的事件类型是字符串,必定加引号,而且不带o…...

Vue从入门到实战Day04
一、组件的三大组成部分(结构/样式/逻辑) 1. scoped样式冲突 默认情况:写在组件中的样式会全局生效 -> 因此很容易造成多个组件之间的样式冲突问题。 1. 全局样式:默认组件中的样式会作用到全局 2. 局部样式:可以…...

Linux学习笔记:信号
信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…...
C#中的隐式类型转换和显式类型转换
在C#中,类型转换分为隐式类型转换(Implicit Type Conversion)和显式类型转换(Explicit Type Conversion),也称为隐式转换和强制转换。 隐式类型转换(Implicit Type Conversion) 隐…...
linux上如何排查JVM内存过高?
在Linux上排查JVM内存过高的问题,可以采用以下几种方法: 1. **使用top命令查看进程**:通过top命令可以观察到系统中资源占用情况,包括CPU和内存。当收到内存过高的报警时,可以使用top命令来查看是哪个进程的内存使用率…...

第四届上海理工大学程序设计全国挑战赛 J.上学 题解 DFS 容斥
上学 题目描述 usst 小学里有 n 名学生,他们分别居住在 n 个地点,第 i 名学生居住在第 i 个地点,这些地点由 n−1 条双向道路连接,保证任意两个地点之间可以通过若干条双向道路抵达。学校则位于另外的第 0 个地点,第…...

word-排版文本基本格式
1、文本的基本格式:字体格式、段落格式 2、段落:word排版的基本控制单位 3、每敲一次回车,为一个段落标记,注意区分换行符和段落标记,换行符为指向下的箭头,段落标记为带拐弯的箭头,换行符&…...
目标检测YOLO实战应用案例100讲-无监督领域自适应目标检测方法研究与应用(五)
目录 多源无监督领域自适应目标检测方法 4.1研究现状及问题形成 4.2相关工作详述...

通过python实现Google的精准搜索
问题背景: 我想通过Google或者其他网站通过精准搜索确认该产品是否存在,但是即使该产品不存在Google也会返回一些相关的url链接,现在想通过python实现搜索结果的精准匹配以确认该产品是否为正确的名称【可以通过google搜索到,如果…...

Nios-II编程入门实验
文章目录 一 Verilog实现流水灯二 Nios实现流水灯2.1 创建项目2.2 SOPC添加模块2.3 SOPC输入输出连接2.4 Generate2.5 软件部分2.6 运行结果 三 Verilog实现串口3.1 代码3.2 引脚3.3 效果 四 Nios2实现串口4.1 sopc硬件设计4.2 top文件4.3 软件代码4.4 实现效果 五 参考资料六 …...

从0开始学python(七)
目录 前言 1 break、continue和pass函数 1.1 break 1.2 continue 1.3 pass 2、序列的索引及切片操作 2.1字符串的索引和切片 2.1.1 字符串索引 2.1.2 字符串切片 总结 前言 上一篇文章我们介绍了python中的循环结构,包括for和while的使用。本章接着往下讲。…...
【二叉树算法题记录】404. 左叶子之和
题目描述 给定二叉树的根节点 root ,返回所有左叶子之和。 题目分析 其实这题无论是迭代法还是递归法,最重要的是要明确判断左叶子的条件:当前节点有左孩子,且这个左孩子没有它的左孩子和右孩子。 迭代法 感觉只要二叉树相关…...

面试集中营—Spring篇
Spring 框架的好处 1、轻量:spring是轻量的,基本的版本大约2MB; 2、IOC:控制反转,Spring的IOC机制使得对象之间的依赖不再需要我们自己来控制了,而是由容易来控制,一个字:爽…...

Lia 原理
训练阶段 论文流程: 具体实现: 通过latent space传递运动信息,实现分两部分。 1)image space->latent space 将源图像映射到隐空间编码。X_s (source image )映射到编码Z_sr,通过W_rd方向上的变化,得到新的编码Z…...

文本批量操作技巧:内容查找不再繁琐,自动化批量移动至指定文件夹
在文本处理和信息管理的日常工作中,我们经常需要处理大量的文件和数据。面对这些海量的信息,如何快速而准确地查找特定的内容,并将它们批量移动至指定的文件夹,成为了一项关键的技能。本文将介绍办公提效工具一些实用的文本批量操…...

[数据结构]动画详解单链表
💖💖💖欢迎来到我的博客,我是anmory💖💖💖 又和大家见面了 欢迎来到动画详解数据结构系列 用通俗易懂的动画的动画使数据结构可视化 先来自我推荐一波 个人网站欢迎访问以及捐款 推荐阅读 如何低…...

图片批量管理迈入智能新时代:一键输入关键词,自动生成并保存惊艳图片,轻松开启创意之旅!
在数字化时代,图片已成为我们表达创意、记录生活、传递信息的重要工具。然而,随着图片数量的不断增加,如何高效、便捷地管理这些图片,却成为了一个令人头疼的问题。 第一步,进入首助编辑高手主页面,在上方…...

【硬件模块】ESP-01SWiFi模块基于AT指令详解(WiFi,TCP/IP,MQTT)
ESP-01S ESP-01S是由安信可科技开发的一款Wi-Fi模块。其核心处理器是ESP8266,该处理器在较小尺寸的封装中集成了业界领先的Tensilica L106超低功耗32位微型MCU,带有16位精简模式,主频支持80MHz和160MHz,并集成了Wi-Fi MAC/BB/RF/P…...

数据结构之单单单——链表
目录 一.链表 1)链表的概念 2)链表的结构 二.单链表的实现 三.链表的分类 1)单向或者双向 2)带头或不带头 3)循环或非循环 一.链表 1)链表的概念 链表(Linked List)是一种…...

【Linux笔记】 基础指令(二)
风住尘香花已尽 日晚倦梳头 重命名、剪切指令 -- mv 简介: mv 命令是 move 的缩写,可以用来移动文件或者将文件改名,是 Linux 系统下常用的命令,经常用来备份文件或者目录 语法: mv [选项] 源文件或目录 目标文件或目录…...

国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...

R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...