JS 事件类型集合

发布时间:2025-05-24 14:48:08 发布人:远客网络

JS 事件类型集合

一、JS 事件类型集合

1、整理了一系列的 JS事件类型，用于不同场景下编程操作。以下为各类事件概述，详情请参阅 MDN文档。

2、当 HTML文档加载完毕时触发 DOMContentLoaded事件，常用于执行页面初始化操作。

3、deviceMotion事件在设备检测到运动变化时触发，与加速度计相关，适用于移动设备运动检测。

4、deviceOrientation事件在设备方向变化时触发，与陀螺仪相关，适用于检测设备方向变化。

5、gamepadconnected和 gamepaddisconnected事件分别在游戏手柄连接和断开时触发，用于处理游戏手柄连接状态变化。

6、orientationchange事件在设备方向（横向或纵向）发生变化时触发，用于响应设备方向变化进行页面布局调整。

7、afterprint事件在文档完成打印后触发，常用于打印完成后的额外操作。

8、beforeprint事件在文档开始打印前触发，用于打印前的准备工作。

9、beforeunload事件在窗口即将关闭时触发，常用于提示用户保存未保存数据或执行清理操作。

10、hashchange事件在 URL的片段标识符发生变化时触发，适用于监听浏览器历史记录变化，如单页面应用的路由。

11、languagechange事件在文档语言设置变化时触发，用于多语言网站的页面内容重加载或刷新。

12、message事件在窗口或工作线程之间传递消息时触发，用于实现跨域通信或与嵌入框架通信。

13、messageerror事件在消息传递时发生错误时触发。

14、offline和 online事件在设备进入离线或在线状态时触发，用于检测网络连接状态变化。

15、pagehide和 pageshow事件在页面隐藏或显示时触发，用于响应页面生命周期事件。

16、popstate事件当浏览器历史记录发生变化时触发，常与 hashchange事件一起用于监听 URL变化。

17、rejectionhandled事件在 Promise拒绝操作被处理时触发。

18、storage事件在浏览器本地存储发生变化时触发，用于监听 localStorage或 sessionStorage变化。

19、unhandledrejection事件在未处理的 Promise拒绝时触发。

20、unload事件在窗口或框架关闭时触发，用于页面关闭前执行清理操作。

21、fullscreenchange事件在全屏模式进入或退出时触发，用于调整页面布局或处理全屏模式变化。

22、fullscreenerror事件在尝试全屏模式失败时触发，用于处理全屏模式进入失败情况。

23、pointerlockchange事件在鼠标指针锁定状态改变时触发，用于处理锁定状态变化。

24、pointerlockerror事件在尝试锁定鼠标指针失败时触发。

25、readystatechange事件在文档 readyState属性发生变化时触发，表示文档加载状态变化。

26、visibilitychange事件在文档可见性状态发生变化时触发，适用于标签页切换或最小化浏览器时处理页面行为。

27、abort事件在资源加载过程被终止时触发，例如图片加载失败。

28、animationcancel, animationend, animationiteration, animationstart等事件与 CSS动画相关，分别在动画开始、结束、循环和被取消时触发。

29、auxclick事件在用户使用辅助鼠标按钮点击元素时触发。

30、beforeinput事件在用户输入之前触发，用于处理输入事件之前的逻辑。

31、blur事件在元素失去焦点时触发。

32、cancel事件通常与操作取消相关，如取消 XMLHttpRequest请求。

33、canplay和 canplaythrough事件与音频/视频元素播放状态相关，分别在媒体可以开始播放和播放无停顿时触发。

34、change事件在表单元素值发生变化并失去焦点时触发。

35、click事件在用户单击某个元素时触发。

36、close事件在窗口或标签关闭时触发。

37、compositionend, compositionstart, compositionupdate等事件与输入法编辑器相关，分别在输入结束、开始和更新时触发。

38、contextmenu事件在用户右键点击元素时触发，通常用于自定义右键菜单。

39、copy事件在用户复制文本或其他数据时触发。

40、cuechange事件在轨道变化时触发，适用于添加文本轨道（如字幕或标题）的媒体元素。

41、cut事件在用户剪切选中的文本或其他数据时触发。

42、dblclick事件在用户双击某个元素时触发。

43、drag, dragend, dragenter, dragleave, dragover, dragstart, drop等事件与拖拽操作相关。

44、durationchange事件在媒体时长发生变化时触发。

45、emptied事件在媒体资源被清空时触发。

46、ended事件在媒体播放结束时触发。

47、error事件在加载资源失败、执行 JavaScript错误等错误时触发。

48、focus, focusin, focusout事件与焦点相关，分别在元素获得、进入、离开焦点时触发。

49、formdata事件在收集表单数据时触发。

50、gotpointercapture事件在元素捕获指针事件时触发。

51、input事件在输入字段值发生变化时触发。

52、invalid事件在表单元素值无效时触发。

53、keydown, keypress, keyup事件分别在键盘按键按下、字符插入到文本时和按键释放时触发。

54、load, loadeddata, loadedmetadata, loadstart事件与资源加载过程相关。

55、lostpointercapture事件在元素失去指针事件捕获时触发。

56、mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup等事件与鼠标操作相关。

57、paste事件在用户粘贴内容时触发。

58、pause, play, playing事件与媒体播放状态相关。

59、pointercancel事件在指针事件被取消时触发。

60、pointerdown, pointerenter, pointerleave, pointermove, pointerout, pointerover, pointerup等事件与指针设备操作相关。

61、progress事件在资源下载时周期性触发，用于显示下载进度。

62、ratechange事件在媒体播放速率发生变化时触发。

63、resize事件在窗口或框架被调整大小时触发。

64、scrollend事件在滚动停止后触发。

65、securitypolicyviolation事件在安全策略被违反时触发。

66、seeked, seeking事件与媒体寻址操作相关。

67、select事件在用户完成文本选择时触发。

68、slotchange事件在 slot元素内容变化时触发。

69、stalled事件在媒体播放延迟时触发。

70、suspend事件在媒体暂停加载时触发。

71、timeupdate事件在媒体播放位置发生改变时触发。

72、toggle事件在元素状态被切换时触发。

73、touchcancel事件在触摸事件被取消时触发。

74、touchend事件在触摸结束时触发。

75、touchmove事件在手指在触摸屏上移动时触发。

76、touchstart事件在手指触摸触摸屏时触发。

77、transitioncancel事件在 CSS过渡被取消时触发。

78、transitionend事件在 CSS过渡结束时触发。

79、transitionrun事件在 CSS过渡开始执行时触发。

80、transitionstart事件在 CSS过渡开始时触发。

81、volumechange事件在音量属性发生变化时触发。

82、waiting事件在媒体播放因缓冲而停止时触发。

83、webkitanimationend, webkitanimationiteration, webkitanimationstart等事件与 WebKit浏览器中的 CSS动画相关。

84、webkittransitionend事件在 WebKit浏览器中当 CSS过渡结束时触发。

85、wheel事件在鼠标滚轮被滚动时触发。

二、javascript里的document.queryselectorall()是什么意思

1、JavaScript中的`document.querySelectorAll`是一个用于选取DOM元素的方法。

2、`document.querySelectorAll`是JavaScript中的一个非常有用的方法，它属于Document Object Model的一部分。该方法返回文档中匹配指定CSS选择器的所有元素的静态NodeList。这意味着你可以使用它来查找页面上的特定元素或元素组。

3、这个方法接受一个CSS选择器作为参数，并返回一个NodeList对象，该对象包含了文档中匹配该选择器的所有元素。例如，如果你想选择页面上所有的`

4、`标签元素，你可以使用如下代码：

5、let paragraphs= document.querySelectorAll;

6、在这个例子中，`paragraphs`就是一个NodeList，包含了页面上所有的`

7、返回的NodeList是一个实时的集合，这意味着如果文档的结构发生改变，NodeList会自动更新。此外，NodeList还是一个可读流的迭代器，你可以使用for...of循环来遍历它。例如：

8、`document.querySelectorAll`在Web开发中非常有用，特别是在需要操作页面上的多个元素时。它可以用于获取表单中的所有输入框，处理特定类别的CSS样式，或者响应用户的交互等场景。由于其功能强大且灵活，该方法在前端开发中非常常见。需要注意的是，虽然它强大且易用，但频繁使用或在性能敏感的情境中滥用可能会影响到页面的性能。因此，在使用时需要注意优化和合理使用资源。

9、总的来说，`document.querySelectorAll`是JavaScript中一种非常强大的工具，可以帮助开发者更方便地选择和操作页面上的元素。

三、javascript

从2004年下半年开始学习Web编程至今3年有余。从HTML，asp开始到现在的VS2008一路学过来，其中学的最多的还是服务器端编程，对客户端编程的学习还是不成系统。虽然在很多个系统里面应用过脚本，有些还起到了比较重要的作用。但一直是只知其然不知其所以然，用的是小心翼翼。现在脚本编程从以前的"雕虫小技"变成了一个Web开发不可或缺的元素，其地位大大提高了，特别是Ajax兴起之后它更是"炙手可热"了。鉴于此种情况及自己对脚本编程的热爱，于是就系统地学习一下脚本。

学习是理解和记忆的过程。在理解和记忆的过程中必不可少地就需要一些辅助的记录，于是我就将自己的学习记录写成随笔。一来是帮助自己理解和记忆，二来也给其它热爱脚本的同志一些参考。

ECMA-262将对象（object）定义为"属性的无序集合，每个属性存放一个原始值、对象或函数"（unordered collection of properties each of which contains a primitive value, object, or function）。这意味着对象是无特定顺序的值的数组。在ECMAScript中，对象由特性（Attribute）构成，特性可以是原始值，也可以是引用值。如果特性存放的是函数，它将被看作对象的方法（Method），否则该特性被看作属性（Property）。

ECMAScript有无用存储单元收集程序（就像C#的垃圾收集器），意味着不必专门销毁对象来释放内存。当再没有对对象的引用时，该对象就被废除了。运行无用存储单元收集程序时，所有废除的对象都会被销毁。每当函数执行完它的代码，无用存储单元收集程序都会运行，释放所有的局部变量，还有在一些其它不可预知的情况下，无用存储单元收集程序也会运行。

把对象的所有引用都设置为null，可以强制性的废除对象。例如：

当变量oObject设置为null后，对第一个创建的对象的引用就不存在了。这意味着下次运行无用存储单元收集程序时，该对象将被销毁。

每用完一个对象后，就将其废除，来释放内存，这是个好习惯。这样还确保不再使用已经不能访问的对象，从而防止程序设计错误的出现。此外，旧的浏览器（如IE）没有完全的无用存储单元收集程序，所以卸载页面时，对象可能不能被正确地销毁。以前IE6就有这样的诟病，当页面被关闭后对象还是没有被释放，所以总是会导致内存溢出的错误。废除对象和它所有的特性是确保内存正确使用的最好方法。

JavaScript中对象分为：本地对象（native object）、内置对象（built-in object）、宿主对象（host object）。其中本地对象和宿主对象大家一般用的比较多，比较熟。这里我就重点说明一下内置对象。

ECMA-262把内置对象定义为"由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现"（any object supplied by an ECMAScript implementation, independent of the host environment, which is present at the start of the execution of an ECMAScript program.）。这意味着开发者不必明确实例化内置对象，它已经被实例化了。但ECMAScript只定义了两个内置对象：

Math对象就是解决数学问题的所有公式。这个在各种编程语言中都有类似的实现，就不做介绍了。

园子里很多搞ASP.net的，相信大家对其中的Global.asax非常熟悉了。但这个对象在ECMAScript中却比较特殊。因为它实际上根本就不存在。如果尝试编写下面的代码去实例化它，将得到错误：

错误消息显示Global不是对象，但上文却说Global是一个内置对象，这不就自相矛盾了吗？不矛盾。这里需要理解的主要概念是，在ECMAScript中，不存在独立的函数，所有的函数都必须是某个对象的方法。ECMAScript中常用的函数例如isNaN()、isFinite（）等，看起来都像独立的函数。实际上，它们都是Global对象的方法。而且Global对象的方法还不止这些。

虽然ECMAScript越来越正规化了，但创建对象的方法却被置之不理。在高级的编程语言（如C#）中，创建对象的方法被明确的定义了。所以不会有太大的分歧。但在脚本语言中创建对象的方法就是多种多样了。

由于对象的属性可在对象创建后动态定义，所以许多开发者都在初次引入JavaScript时编写类似下面的代码：

oCar.showColor=function(){alert(this.color);};

在这段代码中，创建对象car。然后给它设置几个属性：它的颜色是红色，有四个门，每加仑油23英里。最后一个属性是指向函数的指针，意味着该属性其实是个方法。执行这段代码后，就可以使用对象car了。可是要创建多个car实例就麻烦了。

要解决此问题，开发者可以创建并返回特定类型的对象的工厂函数。例如，函数CreateCar（）可用于封装前面列出的创建car对象的操作：

oTempCar.showColor=function(){alert(this.color)};

这里，前面的所有代码都包含在createCar()函数中，此外还有一行额外的代码，返回Car对象作为函数值。调用此函数时，将创建新对象，并赋予它所有必要的属性，复制出一个前面说明的car对象。使用该方法，可以容易地创建car对象的两个版本，他们的属性完全一样。当然，还可以修改creatCar（）函数，给它传递各个属性的默认值，而不是赋予属性默认值：

Function createCar(sColor,iDoors,iMpg)

oTempCar.showColor=function(){alert(this.color)};

Var oCar1=createCar("red",4,23);

Var oCar2=createCar("blue",2,26);

oCar2.showColor();//输出"blue"

给createCar（）函数加上参数，即可为要创建的car对象的color、doors和mpg属性赋值。使这两个对象具有相同的属性，却有不同的属性值。但这里有个问题：每次调用函数createCar（），都要创建新函数showColor()，意味着每个对象都有自己的showColor（）版本。事实上，每个对象用的都是同一段代码。这样的定义方法还有一个如下的变形：

Function Car(sColor,iDoors,iMpg)

this.showColor=function(){alert(this.color)};

Var oCar1=new Car("red",4,23);

Var oCar2=new Car("blue",2,26);

oCar2.showColor();//输出"blue"

这个方法和上一个方法有个一样的缺陷：重复的创建了showColor()函数。为了解决这个缺陷我们可以用下面的方法。

该方法利用了对象的Prototype属性。用空构造函数来设置类名，然后所有的属性和方法都被直接赋予prototype属性：

Car.prototype.showColor=function(){alert(this.color)};

使用这个方法可以解决重复创建showColor（）函数，但又会有新的问题，考虑下面的例子：

Car.prototype.drivers=new Array("Mike","Sue");

Car.prototype.showColor=function(){alert(this.color)};

alert(oCar1.drivers);//输出"Mike,Sue,Matt"