js中常见的几种事件

简介: js中常见的几种事件

在JavaScript中,有许多不同的事件可以触发。以下是一些常见的事件及其使用示例:

  1. 点击事件(click):当用户点击某个元素时触发。
javascriptdocument.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了!");
});
  1. 加载事件(load):当页面或部分页面加载完毕时触发。
javascriptwindow.addEventListener("load", function() {
alert("页面加载完毕!");
});
  1. 鼠标移动事件(mousemove):当用户移动鼠标时触发。
javascriptdocument.addEventListener("mousemove", function(event) {
console.log("鼠标位置: " + event.clientX + ", " + event.clientY);
});
  1. 键盘事件(keydown, keyup, keypress):当用户在键盘上按下或释放一个键时触发。
javascriptdocument.addEventListener("keydown", function(event) {
console.log("按下的键是: " + event.key);
});
  1. 滚动事件(scroll):当用户滚动页面时触发。
javascriptwindow.addEventListener("scroll", function() {
console.log("页面已滚动到: " + window.pageYOffset);
});
  1. 触摸事件(touchstart, touchend, touchmove):在触摸屏幕上,当用户开始触摸、结束触摸或移动手指时触发。这些事件主要在移动设备上使用。
  2. 失去焦点事件(blur):当元素失去焦点时触发。例如,当用户点击页面上的其他地方,或者使用tab键移开焦点时。
  3. 获得焦点事件(focus):当元素获得焦点时触发。例如,当用户点击输入框或使用tab键选中输入框时。
  4. 输入事件(input):当元素的值发生变化时触发,例如在输入框中输入文本。
  5. 选择事件(change):当元素的值被改变并且离开焦点时触发,例如在选择框中选择一个选项。
  6. DOMContentLoaded事件:当文档被完全加载和解析完成时触发,但不会等待样式表、图像和子框架完成加载。它和load事件的区别是DOMContentLoaded不等待样式表、图像和子框架完成加载。
相关文章
|
22天前
|
JavaScript 前端开发
js事件队列
js事件队列
|
11天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
23 2
|
1月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
1月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
28 0
|
3月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
35 0
|
11天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
25天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
44 1
|
6天前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
js的回车事件
js的回车事件
35 3
|
1月前
|
JavaScript 前端开发
JavaScript 事件的概念
JavaScript 事件的概念
48 1