JavaScript学习笔记5

简介: JavaScript学习笔记5

五、JavaScript事件驱动


1、概念


在用户通过浏览器实行交互性体验中,事件驱动这一概念,就因此而来。要想弄明白事件驱动,首先得清楚什么是事件和什么是事件处理程序这两个问题。浏览者通过鼠标或键盘执行的操作称为事件,对此事件做出响应的代码称为事件处理程序,事件的发生使得相应的事件处理程序被执行称为事件驱动。


基于事件驱动的事件处理过程:


  • 发生事件


  • 启动事件处理程序(通过事件处理器触发)


  • 事件处理程序作出反应


2、事件分类


除浏览者对键盘或鼠标的操作可引发事件之外,浏览器及网页内部的某些对象的状态发生变化时,也会引发事件。一般将事件分为两种:用户事件和系统事件。


①用户事件


用户事件细分可以分为:鼠标事件、键盘事件


  • 鼠标事件有:


  • onmousedown  鼠标按键被按下
  • onmouseup 鼠标按键被松开
  • onmouseover 鼠标移到某元素表面之上
  • onmouseout 鼠标从某元素表面移开
  • onmousemove 鼠标在某元素表面持续移动
  • onclick 鼠标单击某元素
  • ondblclick 鼠标双击某元素


  • 键盘事件有:


  • onkeydown 键盘按键被按下
  • onkeyup 键盘按键被松开
  • onkeypress 键盘按键被按下并松开


②系统事件


系统事件可以细分为:window对象事件、Form对象事件、焦点事件、数据变更事件等


  • window对象事件有:


  • onload  浏览器加载一个网页文档或一个图像完成时
  • onunload  浏览器卸载一个网页文档时
  • onresize  浏览器窗口或框架的尺寸发生变化时
  • onscroll  浏览器窗口或框架中的网页发生滚动时


  • Form对象事件有


  • onsubmit表单提交时
  • onreset  表单重置时


  • 焦点事件有:


  • onfocus界面元素获得焦点时
  • onblur  界面元素失去焦点时


  • 数据变更事件有:


  • onchange 表单中的文本元素内容发生变化时或列表框发生选项切换时


相关文章
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
63 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
44 0
|
7月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
76 0
webgl学习笔记3_javascript的HTML DOM
|
7月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
55 0
|
7月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
7月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
52 0
|
存储 JavaScript 前端开发
【js】函数概述学习笔记(8)
【js】函数概述学习笔记(8)
47 0
|
存储 JavaScript
【js】数组学习笔记(7-2)
【js】数组学习笔记(7-2)
72 0