事件高级。

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

就是给元素添加事件

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

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.mzph.cn/pingmian/11367.shtml

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

相关文章

交流负载箱:电力系统的智能升级

随着科技的不断发展,电力系统也在不断地进行升级和改进。在这个过程中,交流负载箱作为一种新型的电力设备,为电力系统的智能升级提供了有力的支持。本文将对交流负载箱在电力系统中的应用及其优势进行简要分析。 首先,交流负载箱…

springboot本地文件同步到nacos 本地文件上传到nacos 使用nacos

导入依赖 <!--配置文件使用nacos--><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId><version>nacos版本</version></dependency><dependency…

Wifi——Wifi断连问题分析

一、iperf测试wifi断连 1.信号强度差 -36表示非常强&#xff1b;但网络质量依然非常差。 可以分析出四个原因&#xff1a; 2.与throughput相关 为什么同一个网络的信号强度估算会有一定差异&#xff1f;&#xff01; 下图是上述log的一些信息&#xff1a;

高考志愿系统-信息管理模块:院校信息分析

信息模块包括三个信息实体&#xff1a;招生学校&#xff0c;专业&#xff0c;分数线。 学校实体中有一个叫院校代码的属性&#xff0c;专业实体中含有院校代码这个属性&#xff0c;属于外键&#xff0c;一个学校有多个专业&#xff0c;所以学校和专业属于一对多关系。 专业实…

KBPC2510-ASEMI开关电源整流方桥KBPC2510

编辑&#xff1a;ll KBPC2510-ASEMI开关电源整流方桥KBPC2510 型号&#xff1a;GBU810 品牌&#xff1a;ASEMI 封装&#xff1a;KBPC-4 正向电流&#xff08;Id&#xff09;&#xff1a;25A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#x…

阅读送书抽奖?玩转抽奖游戏,js-tool-big-box工具库新上抽奖功能

先讨论一个问题&#xff0c;你做软件工作是为了什么&#xff1f;从高中选专业&#xff0c;就喜欢上了软件开发&#xff1f;还是当初毕业不知道干啥&#xff0c;不喜欢自己的专业&#xff0c;投入软件开发的怀抱&#xff1f;还是干着干着别的&#xff0c;突然觉得互联网行业真不…

WordPress中插入视频的两种方法详解

最近我在建设WordPress网站的时候需要上传视频&#xff0c;我使用的是Hostease的主机安装的WordPress&#xff0c;随后在咨询了他们的技术支持后获得了一些解决方法。下面将介绍WordPress中插入视频的两种方法&#xff1a;本地上传和外部引用。 本地上传视频 使用WordPress的古…

阿里云短信提示被攻击怎么解决!!

你是否收到过这样的短信&#xff0c;【阿里云】尊敬的用户&#xff1a;您的IP: 实例名称&#xff1a; 受到攻击流量已超过云盾DDoS基础防护的带宽峰值&#xff0c;服务器的所有访问已被屏蔽&#xff0c;如果35分钟后攻击停止将自动解除否则会延期解除。详情请登录云盾控制台DDo…

华为ensp中路由器IPSec VPN原理及配置命令(超详解)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月13日2点11分 虚拟专用网络&#xff08;VPN&#xff09;是一种通过公用网络建立安全连接的技术。它可以使您的设备看起来像是连接到另一个网络&#xff0c;例如公司…

618买什么划算?618买啥好?618数码好物推荐,必买清单大放送!

随着一年一度的618购物狂欢节的临近&#xff0c;作为数码领域的资深爱好者&#xff0c;我感到有责任为大家推荐精心挑选的数码精品。无论你是追逐科技尖端的探索者&#xff0c;还是希望通过智能装备提升生活品质的时尚人士&#xff0c;这里的每一款产品都能与你的心灵产生共鸣。…

如何3分钟快速训练一个属于自己的(暴躁老哥、猫娘)AI大模型?(弱智吧经典问题为例)

首先我们进入谷歌Gemini&#xff1a;Gemini - Google DeepMind 然后我们进入官网看见左边的几个选项 选择Create new prompt创建新的提示 选择结构化提示 点击action可以增加列&#xff0c;也就是设置更多回答或者选项 那么那个温度&#xff08;Temperature&#xff09;是什么…

笨方法学习python(七)-输入

输入 一般软件做的事情主要就是下面几条&#xff1a; 接受人的输入。改变输入。打印出改变了的输入。 前面几节都是print输出&#xff0c;这节了解一下输入input&#xff1b;在python2中使用的是raw_input&#xff0c;python3就只是input。 print ("How old are you?&…

【Python贪吃蛇】:编码技巧与游戏设计的完美结合

文章目录 &#x1f525;一、运行效果&#x1f4a5;二、游戏教程✈1. 导入模块❤️2. 初始化游戏元素☔3. 改变蛇移动的方向&#x1f44a;4. 绘制方块&#x1f680;5. 检查蛇头是否在游戏区域内&#x1f308;6. 定义蛇的移动函数&#x1f3ac;7. 绑定键盘事件 ⭐三、完整代码 &a…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一)

基于LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; RAG 是未来人工智能应用的基石。大家并不是在寻求仅仅产生无意义反应的人工智能。而目标是人工智能能够从特定文档集中检索答案&#xff0c;理解查询的上下文&#xff0c;指导自己搜索其嵌入内容或…

APScheduler定时器使用【重写SQLAlchemyJobStore版】:django中使用apscheduler,使用mysql做存储后端

一、环境配置 python3.8.10 包&#xff1a; APScheduler3.10.4 Django3.2.7 djangorestframework3.15.1 SQLAlchemy2.0.29 PyMySQL1.1.0 项目目录情况 gs_scheduler 应用 commands &#xff1a; 主要用来自定义命令&#xff0c;python manage.py crontab schedulers&#…

小米/红米手机刷机错误:Missmatching image and device

报错&#xff1a; Missmatching image and device。 场景&#xff1a; 该解决方法只适用于手机是通过EMT解锁的。 解决方法&#xff1a; 打开刷机脚本&#xff0c;并注释检测脚本&#xff1a; 刷机脚本根据不同的刷机方式&#xff0c;选择编辑不同的脚本&#xff0c;例如&am…

2024年最顶尖的AI驱动SEO工具|TodayAI

在当今数字营销的竞争环境中&#xff0c;获得搜索引擎的高排名至关重要&#xff0c;因为它直接关联到网站的有机流量和品牌的在线影响力。搜索引擎优化&#xff08;SEO&#xff09;是提高网站排名的关键方式&#xff0c;通过优化网站内容和结构来符合搜索引擎的算法要求。然而&…

win server服务器 关闭危险端口 135,137,138,139,445的方法

通过防火墙来控制 打开控制面板 选择检查防火墙状态 选择高级设置 选择入站规则&#xff0c;再新建规则 选择端口&#xff0c;下一步 选择端口应用于啥协议&#xff0c;再指定端口&#xff0c;再下一步 选择阻止连接&#xff0c;下一步 下一步 给规则别名一下&#xff0c;方便…

5.12学习总结

一.JAVA聊天室项目 文件发送 使用 Java Socket 实现聊天内容或文件的传输的原理如下&#xff1a; 服务器端启动&#xff1a;聊天室的服务器端在指定的端口上监听客户端的连接。它创建一个 ServerSocket 对象&#xff0c;并通过调用 accept() 方法等待客户端的连接请求。客户…

快速入门:利用Go语言下载Amazon商品信息的步骤详解

概述 在这篇文章中&#xff0c;我们将深入探讨如何利用Go语言这一强大的工具&#xff0c;结合代理IP技术和多线程技术&#xff0c;实现高效下载Amazon的商品信息。首先&#xff0c;让我们来看看为什么选择Go语言作为开发网络爬虫的首选语言。 Go语言在网络开发中的特点 简洁…