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:阻止事件传播
目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
28天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
16天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
39 6
|
22天前
|
Web App开发 JavaScript 前端开发
深入理解Node.js事件循环和异步编程模型
【10月更文挑战第9天】在JavaScript和Node.js中,事件循环和异步编程是实现高性能并发处理的基石。本文通过浅显易懂的语言和实际代码示例,带你一探究竟,了解事件循环的工作原理及其对Node.js异步编程的影响。从基础概念到实际应用,我们将一步步解锁Node.js背后的魔法,让你的后端开发技能更上一层楼!
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
21 2
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
18天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
27天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
48 0
|
29天前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
52 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法