js的事件处理 js事件处理器里的内容不会被回收吗
bigegpt 2024-10-12 06:29 3 浏览
事件处理
客户端js程序采用异步事件驱动编程模型。在这种情况下当文档,浏览器,元素发生一些事情的时候,会产生事件。
举例 当浏览器加载完文档以后会触发一个事件。该事件会有一个函数进行处理,即回调函数
这种只不单单用于web界面,所有使用图形界面的应用程序都采用了这种方式。
事件类型
事件分类
依赖于设备的输入事件
有些事件和特定输入设备直接相关。比如鼠标和键盘。
touchmove 当触点在触控平面上时发生该事件
独立于设备的输入事件
click事件表示激活了链接的事件。通过鼠标,按钮或者移动设备上的触摸触发该事件
用户界面事件
通常用于HTML表单元素,包括文本输入域获取键盘焦点的focus事件,提交按钮将会触发submit事件
状态变化事件
不是由用户活动由网络或者浏览器活动触发,表示某种生命周期或相关状态的变化。
online 返回浏览器的联网状态
特定的api事件
一些web api会有自己的事件类型
拖放的api dragstart 当用户拖动一个元素,或者选择一个文本的时候触发该事件
计时器和错误处理程序
计时器在指定的时间后触发该事件,错误处理程序,try catch 对应于一个响应,会有异步进行抛出
传统事件类型
表单事件
当提交表单和重置表单时会触发submit和reset事件,当用户和类按钮(包括单选和复选)交互的时,将会发生click事件,当用户输入文字,选择选项或选择复选框改变相应的表单元素的状态时,将会触发change事件,通过键盘改变焦点的表单元素在得到和失去焦点时将会触发focus和blur事件。
通过事件处理程序能取消submit和reset事件的默认操作。某些click事件也是如此,focus和clur事件不会冒泡,但其他所有表单事件都可以。
无论用户何时输入文字,都会触发input事件。
window事件
window事件是指事件的发生与浏览器窗口本身而非窗口中显示的任何特定文档内容相关。
load事件
load事件与文档和其所有外部资源(图片)完全加载并显示给用户时将会触发。
unload事件
unload事件,当用户离开当前文档转向其他文档时将会触发。
unload事件处理程序可以用于保存用户的状态,但其不能取消用户转向其他地方。
beforeunload事件
此事件将会询问用户是否确定离开当前页面。如果beforeunload的回调函数返回一个字符串,那么在新页面加载之前,字符串将会出现在展示给用户确认的对话框上,这样用户将会有机会取消跳转停留在当前页上
注意;该事件仅仅是在当前页面的跳转更改等,转换标签不会触发该事件
onerror属性
此为一个window对象的属性。在js出错的时候将会触发其
其他
像img元素这样的替换元素也能为其注册load和error事件处理程序。当外部资源完全加载或发生阻塞加载错误时将会触发该事件。某些浏览器也支持about事件,当图强因为用户停止加载进程而导致失败的时候也会触发该事件。
focus和blur事件也为window事件,当浏览器窗口从操作系统中得到或失去键盘焦点的时候将会触发该事件
当用户调整浏览器窗口大小或滚动其会触发resize和scroll事件,scroll事件也能在任何可以滚动的文档元素上触发,例如css的的overflow属性也能触发。
鼠标事件
当用户在文档上移动和单击鼠标时都会产生鼠标事件。这些事件在鼠标指针所对应的最深嵌套元素上触发。但其会冒泡直到文档的最顶层。
clientX和clientY属性指定了鼠标在窗口坐标中的位置。button和which属性指定了按下的鼠标键是哪个。
当鼠标辅助键按下的时候,对应的属性为altkey和ctrlkey和metakey和shiftkey会设置为true,对于click事件,detail属性指定了其是单击,双击,还是三击。
每当用户移动和拖动鼠标时,会触发mousemove事件,当用户按下或释放鼠标按键的时候触发mousedown和mouseup事件。
在mousedown和mouseup事件队列之后,浏览器也会触发click事件,如果用户在很短的时间内单击两次鼠标,则第二个事件为dblclic事件,当单击鼠标右键时,浏览器会显示上下文菜单,在显示菜单之前,也会触发contextmenu事件,如果取消这个事件将会阻止菜单的显示,该事件为获得鼠标右击通知的最简单方法。
当用户移动鼠标指针从而使它悬停到新元素上时,浏览器就会在该元素上触发mouseover事件,当鼠标移动指针从而使它不在悬停在某个元素上时,浏览器会触发mouseout事件,(该事件有relatedTarget属性指明这个过程涉及的其他元素)
当用户滚动鼠标的时候,浏览器触发mousewheel事件,传递事件对象属性指定轮子转动的大小和方向。
键盘事件
当键盘聚焦到web浏览器时,用户每次按下或释放键盘上的按键时都会产生事件,键盘快捷键叶同样能被浏览器和操作系统吃掉,此时对js事件处理程序不可见,无论任何文档元素获取键盘焦点都会触发键盘事件,并会冒泡到window对象,
触摸屏和移动设备事件
用户旋转设备的时会产生orientationchange事件,有一个缩放和旋转手势,当手势开始时将会生成getsturestart事件,手势结束时将会生成gestureend事件。在这两个事件之间是跟踪手势过程的gesturechange事件队列,将事件传递的事件对象属性为scale和rotation
握紧手势的scale值小于1.0
撑开手势的scale的值大于1.0
rotation为事件开始时手指旋转的角度。以度为单位正值表示顺时针方向旋转
当手指触摸屏幕的时候将会触发touchstart事件,当手指移动时会触发touchmove事件,当手指离开屏幕时会触发touchend事件,触摸事件传递的事件对象有一个changedTouches属性,该属性为一个类数组对象,其每个元素都描述触摸的位置。
当设备允许用户从竖屏旋转到横屏模式时会在window对象上触发orientationchanged事件。该对象的orientation属性能给出当前方位,其值为0, 90, 180, 或 -90
注册事件处理程序
- 给事件目标对象或文档元素设置属性
- 将事件处理程序传递给对象或文档元素的一个方法
设置js对象属性为事件处理程序
事件处理程序属性的名字由on后面跟着事件名组成。onclick,onchange,onload,onmouseover
onload 当对象的资源被加载的时候,该对象的onload事件将会被触发,然后将表单的提交的onsubmit事件和一个处理函数进行绑定
onsubmit 在表单提交的时候,将会触发该事件
下方栗子演示一个提交的时候表单验证的过程
其中validate函数为一个自定义的表单验证函数,其函数的参数this指向elt
window.onload = () => {
// 查找一个<form>元素
var elt = document.getElementById("shipping_address");
// 注册事件处理程序函数
// 在表单提交之前调用该函数
elt.onsubmit = () => { return validate(this); };
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
设置HTML标签属性为事件处理程序
<button onclick="alert('Thank you');">点击这里</button>
- 1
点击按钮会弹出一个对话框
addEventListener()
为事件绑定一个处理的函数
<script>
var b = document.getElementById("my button");
b.onclick = () => { alert("Thanks for clicking me!"); };
b.addEventListener("click", () => { alert("Thanks again!"); }, false); // 最后一个参数为是否进行冒泡
</script>
- 1
- 2
- 3
- 4
- 5
上方会弹出两个对话框,一个触发了onclick事件,一个触发了addEventListener注册的click事件。
注册的click处理的函数,将会按照注册的顺序依次不断的调用。(可以注册多个处理程序)。
document.removeEventListener("mousemove", handleMouseMove, true);
- 1
移出在mousemove上注册的事件,处理函数为handLenMouseMove,在事件上直接注册,没有冒泡的过程。
事件处理程序的调用
事件处理程序运行的环境
this关键字指的是事件的目标。
事件处理程序的作用域
这是个坑的集散地,表单上有一个HTML事件处理程序想要引用window的location对象,必须使用window.location,不能使用location,因为该location为表单作用域链上的location
事件处理程序的返回值
如果返回false则告诉浏览器不要执行这个事件的默认操作。
调用顺序
通过设置对象属性,HTML属性注册的处理程序一直优先调用
使用addEventList注册的处理程序,按照DOM的顺序进行调用
使用attachEvent()注册的事件按照随机的顺序调用
事件传播
当事件目标为window对象或其他一些单独对象,浏览器会简单的调用对象上的处理程序响应事件。
调用目标元素上注册的事件处理函数
在调用目标元素上注册的事件处理函数的时候,该事件会冒泡到DOM树的树跟,调用目标的父元素的事件处理程序,即可以在共同的祖先元素上注册一个处理程序来处理所有的事件
例如:在form元素上注册change事件处理程序取代在表单的每个元素上注册change事件处理程序。
原因:冒泡
注意:load事件,(load当资源加载完成以后,将会触发load事件,不单单指整个文档)其会在Document对象上停止冒泡不会传播到window对象,只有整个文档都加载完成的时候将会触发window对象的load事件
捕获
事件的第一阶段 捕获 发生在目标处理程序调用程序之前 addEventener()把一个布尔值作为其第三个参数,如果为true那么事件处理程序被注册为捕获事件处理程序,会在事件传播的第一个阶段调用。事件传播的捕获阶段像是反向的冒泡,,将会最先调用window对象的捕获处理程序,然后将会调用document对象的捕获处理程序,接着是body对象的捕获处理程序,逐渐按照DOM树往下,直到调用事件目标的父元素的捕获事件捕获。
事件取消
通过调用事件对象的preventDefault()方法取消事件的默认操作。
文档加载事件
web应用需要web浏览器通知它们文档加载完毕和为操作准备就绪的时间。
当文档准备就绪的时候调用函数
事件冒泡和传播
事件冒泡属于微软的,向上
事件传播属于网景浏览器(怀旧,一个时代,可惜已经不存在了),正好相反。
后来w3c将这两种给统一了,规定任何事件首先向下传播直到遇到目标元素,如果没有遇到冒泡元素,将会不断的向上冒泡进行返回。
相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...
- redis的主从复制,读写分离,主从切换
-
当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...
- redis - 主从复制(Redis主从复制时序图)
-
1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...
- Redis主从复制(redis主从复制主节点挂了)
-
介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解(redis主从架构高可用如何实现)
-
Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置(linux系统安全配置包括)
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...
- Linux内核设计与实现—进程管理(linux内核程序设计)
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)