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 UED
JavaScript 的事件循环机制是其非阻塞 I/O 模型的核心
JavaScript的事件循环机制是其非阻塞I/O的关键,通过单线程的调用栈和任务队列处理异步任务。当调用栈空时,事件循环从任务队列取出一个任务执行,形成循环。异步操作完成后,回调函数进入任务队列,等待被事件循环处理。微任务如Promise回调在每个宏任务结束后执行。此机制确保JavaScript能高效处理异步操作,不阻塞主线程,提供流畅的用户体验。
7 2
|
5天前
|
JavaScript 前端开发 开发者
javascript事件大全
javascript事件大全
10 1
|
5天前
|
JavaScript 前端开发
Javascript的一些监听事件
Javascript的一些监听事件
11 2
|
5天前
|
JavaScript 前端开发
js的事件介绍
js的事件介绍
11 1
|
5天前
|
JavaScript 前端开发
js的事件
js的事件
10 1
|
5天前
|
JavaScript 前端开发
js的交互事件
js的交互事件
12 1
|
9天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
11天前
|
JavaScript 前端开发 开发者
【JavaScript技术专栏】JavaScript事件处理机制详解
【4月更文挑战第30天】本文探讨JavaScript中的事件处理机制,涉及事件类型(如click、mouseover)、事件流(冒泡型、捕获型及目标阶段)、事件处理函数(内联与addEventListener方法)以及事件委托(用于优化内存和处理动态元素)。此外,还介绍了事件取消,通过`preventDefault()`和`stopPropagation()`控制事件行为。理解这些概念对构建交互式Web应用至关重要。
|
12天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
12天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)