JavaScript学习笔记(十五) 事件模型 下

简介: JavaScript学习笔记(十五) 事件模型

正文


3、事件类型


HTML 与 JavaScript 通过事件进行交互,常见的事件如下:


(1)鼠标事件


  • mousedown:在按下鼠标按键时触发
  • mouseup:在松开鼠标按键时触发
  • click:在点击鼠标时触发
  • dblclick:在双击鼠标时触发
  • mouseenter:在鼠标移入特定范围时触发
  • mouseleave:在鼠标移出特定范围时触发
  • mousemove:鼠标在特定范围内移动时触发
  • mouseover:鼠标移到某元素上触发
  • mouseout:鼠标从某元素移开触发


(2)键盘事件


  • keydown:在按下键盘按键时触发
  • keyup:在松开键盘按键时触发
  • keypress:在按住键盘按键时触发


(3)UI 事件

  • load:在文档或图像加载完成后触发
  • unload:在文档或图像销毁完成后触发
  • error:加载文档或图像时发生错误
  • abort:加载文档或图像时出现中断
  • scroll:在滚动滚动条时触发
  • resize:调整窗口大小时触发


(4)焦点事件

  • focus:在元素获得焦点时触发,事件不冒泡
  • blur:在元素失去焦点时触发,事件不冒泡


(5)表单事件

  • select:在被选定时触发
  • change:在被修改时触发
  • submit:在被提交时触发


4、事件对象


当一个事件被触发时,会产生一个事件对象,这个事件对象会隐式传入事件处理函数

因此,我们可以在事件处理函数中通过事件对象的属性和方法获取事件的相关信息


(1)事件对象的常用属性


  • type:事件名称
  • target:触发事件的目标元素
  • currentTarget:触发事件的当前元素
  • bubbles:事件是否为冒泡类型
  • cancelBubble:是否取消冒泡行为
  • cancelable:是否能调用 preventDefault() 方法取消默认行为
  • defaultPrevented:是否有调用 preventDefault() 方法
  • eventPhase:事件传播的阶段
  • timeStamp:触发事件的时间
  • clientX:鼠标指针相对于浏览器页面的水平坐标
  • clientY:鼠标指针相对于浏览器页面的垂直坐标
  • screenX:鼠标指针相对于屏幕的水平坐标
  • screenY:鼠标指针相对于屏幕的垂直坐标
  • shiftKey:“SHIFT” 键是否被按下
  • ctrlKey:“CTRL” 键是否被按下
  • altKey:“ALT” 键是否被按下
  • metaKey:“meta” 键是否被按下


(2)事件对象的常用方法


  • preventDefault:阻止默认行为
  • stopPropagation:阻止事件传播
目录
相关文章
|
2月前
|
JavaScript 前端开发
js事件队列
js事件队列
|
25天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
29 2
|
9天前
|
JavaScript 前端开发 数据库
探索Node.js中的异步编程模型
【9月更文挑战第23天】在Node.js的世界里,异步编程是核心的魔法,它让这个平台能够处理高并发请求。本文将带你深入理解Node.js的异步编程模型,通过代码示例和直观的解释,我们将一起揭开异步编程的面纱。
30 16
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
7天前
|
监控 JavaScript 前端开发
|
12天前
|
Web App开发 JavaScript 前端开发
探索Node.js中的异步编程模型
【9月更文挑战第21天】在现代Web开发中,Node.js以其非阻塞I/O和事件驱动的特性成为热门选择。本文将深入探讨Node.js的异步编程模型,揭示其背后的原理,并通过示例代码展示如何高效利用异步特性来处理并发任务。
|
23天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
21天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模型
【9月更文挑战第11天】在JavaScript的运行环境中,Node.js因其高效的异步处理能力而备受青睐。本文将深入浅出地介绍Node.js如何处理异步操作,包括回调函数、Promises和async/await等概念,并探讨它们对后端开发的意义。
34 5
|
24天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
下一篇
无影云桌面