事件高级。

news2024/11/24 4:53:18

一、注册事件(绑定事件)

就是给元素添加事件

注册事件有两种方式:传统方式和方法监听注册方式

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事件触发的时候,文字已经落入文本框中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1667320.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【DIY小记】深圳万象天地餐馆探店点评

第一次在技术博客里面写生活日记,也算是破了个小天荒。个人以为,博客是个人生活思考的载体,而技术只占生活的一部分,那么博客里为什么一定要限制只能够写技术内容,不能写点其它生活上的东西呢?思来想去&…

WHAT - CSS Animationtion 动画系列(三)- 动画卡顿分析

目录 一、背景二、动画卡顿具体分析三、具体优化方法3.1 JavaScript:优化 JavaScript 代码1. requestAnimationFrame 优化2. Web Worker3.2 Style:减少 DOM 操作3.3 Layout:避免频繁触发布局的动画3.4 避免强制同步布局事件3.5 Paint&Composite:GPU加速一、背景 自 HT…

查询新加 字段不返回数据要看 有没有 AllInfoResultMap 有要再里面加字段

查询新加 字段不返回数据要看 有没有 AllInfoResultMap 有要再里面加字段

深度学习+计算机视觉

在旷视 这个ai四小龙 深度学习 是必不可少,而且这年头…… 机器学习:在预定义的可能性空间中,利用反馈信号的指引,在输入数据中寻找有用的表示和规则 原理 a. 对神经网络的权重(有时也被称为该层的参数)进行随机赋值…

MFC的view视图为何不能拖入控件

在MFC中,View类通常用于显示和处理应用程序的数据,而不是直接用于设计用户界面。因此,默认情况下,MFC的View类是不支持在设计时拖动控件的。 MFC中设计用户界面通常使用的是对话框类(Dialog)或窗口类&…

C++入门必读-Qt的安装与配置

QT简介 Qt是一个跨平台的C图形用户界面应用程序框架。它为应用程序开发者提供建立图形界面所需的所有功能。它是完全面向对象的,很容易扩展,并且允许真正的组件编程。 QT下载 访问下载网站: Index of /archive/qt 安装编译器 QT安装 建议安装之前将网络断…

从关键新闻和最新技术看AI行业发展(2024.4.22-5.5第二十二期) |【WeThinkIn老实人报】

写在前面 【WeThinkIn老实人报】旨在整理&挖掘AI行业的关键新闻和最新技术,同时Rocky会对这些关键信息进行解读,力求让读者们能从容跟随AI科技潮流。也欢迎大家提出宝贵的优化建议,一起交流学习💪 欢迎大家关注Rocky的公众号&…

Scoop国内安装、国内源配置

安装配置源可参考gitee上的大佬仓库,里面的步骤、代码都很详细,实测速度也很好 glsnames/scoop-installer 也可以结合其它bucket使用 使用Github加速网站,也可以换做其他代理方式,自行测试 例如:https://mirror.ghprox…

点云DBSCAN聚类,同时获取最多点数量的类,同时删除其他的类并显示

代码的主要目的是处理一个点云文件(从某个巷道或类似环境中获取的),并尝试识别并可视化其中的主要结构(比如墙壁),同时去除可能的噪声和异常点。它首先读取一个点云文件,进行降采样和异常点移除,然后使用DBSCAN聚类算法对剩余的点云进行聚类,最后选择并可视化包含最多…

vscode+clangd阅读Linux内核源码

1. 禁用或卸载官方C/C插件. 2. 安装clangd插件 3. 清除之前的产物 4. 生成.config文件 5.编译生成内核镜像 6.编译内核模块 7.编译设备树文件 8.生成compile_commands.json文件 运行上述命令后,在内核源码根目录生成了compile_commands.json文件 9.设置clangd插…

JAVA抽象类,接口与内部类,常用API知识总结

文章目录 抽象类和抽象方法抽象类的定义格式抽象方法的定义格式注意事项 接口定义和使用成员特点和类之间的关系新增JDK8新增方法JDK9新增方法 总结设计模式 内部类使用场景分类成员内部类获取内部类对象访问成员变量 静态内部类局部内部类匿名内部类格式使用场景 示例 常用API…

Java(三)---逻辑控制

文章目录 前言1.逻辑控制语句的分类1.顺序结构2.分支结构2.1.if结构2.1.1.if...else语句2.2.2.if ... else if... else语句 2.2.switch语句 3.循环结构3.1.while3.2.break3.3.continue3.4.for循环3.5.do while循环 4.输入输出4.1.输入到控制台4.2.从键盘输入 前言 前两篇文章&…

数据分析概念定义和发展前景

数据分析概念定义和发展前景 前言一、数据分析概念二、数据的定义数据的定义数据的分类定性数据定量数据 三、数据的价值数据为什么具有价值 四、数据分析的目的对于企业来说总结 五、数据分析类型的划分描述性统计分析探索性数据分析传统的统计分析方法验证性数据分析 六、 数…

240512-关于如何用VSCode编写C#程序的简单说明

240512-关于如何用VSCode编写C#程序的简单说明 从安装软件开始 ,到编写一个HelloWorld的C#文件结束,介绍如何用VSCode编写C#程序 1 上官网下载一个安装包 官网地址:https://visualstudio.microsoft.com/zh-hans/downloads/ 2 打开安装包进…

3D分子生成的定制扩散框架 MolDiff - 评测

MolDiff模型是一种考虑分子键生成的3D分子生成的新模型。MolDiff是清华大学智能产业研究院马剑竹课题组发表在PMLR 2023的工作,第一作者是Xingang Peng,文章题目为:《 Addressing the Atom-Bond Inconsistency Problem in 3D Molecule Genera…

计算机毕业设计 | vue+springboot调查问卷管理系统(附源码)

1,研究目的 在进入21世纪以后,互联网得到了蓬勃的发展,电子问卷调查也开始逐渐流行起来。传统纸质问卷和电子问卷相比较后,传统问卷还存在很多弊端: 问卷分发起来比较困难,并且分发试卷耗费大量的金钱和时…

Vue3项目Easy云盘(二):文件列表+新建目录+文件重命名+文件上传

一、文件列表 1.封装全局组件Table.vue 因为Main.vue等都会用到文件列表table&#xff0c;所以直接封装成组件。 src/components/Table.vue <template><!-- 表格 --><div><el-tableref"dataTable":data"dataSource.list || []":h…

关于在ubuntu18.04中运行ORB_SLAM3时遇到的报错:段错误(核心已转储)的解决方法(踩坑记录)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、段错误&#xff08;核心已转储&#xff09;1. 已放弃(核心已转储)(1) 问题描述(2)原因分析 二、解决方法1. 解决方法一2. 解决方法二 总结 一、段错误&#xff…

Vditor集成于VUE笔记

文章目录 前言一、安装Vditor二、渲染markdown三、options3.1 自建CDN3.2 outline大纲不显示、不跳转问题3.3 upload 图片/视频上传3.4 toolbar提示位置点击事件more中文字 3.5 sv分屏渲染模式隐藏编辑框3.6 after中的insertValue或者setValue 前言 Vditor是一款易于使用的 Ma…

大学生体质测试|基于Springboot+vue的大学生体质测试管理系统设计与实现(源码+数据库+文档)

大学生体质测试管理系统 目录 基于Springboot&#xff0b;vue的大学生体质测试管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 4教师功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算…