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 表单中的文本元素内容发生变化时或列表框发生选项切换时


相关文章
|
5天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
5天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
19 0
|
5天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
5天前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
26 0
|
6月前
|
前端开发 JavaScript Python
javascript入门学习笔记打卡(2)
javascript入门学习笔记打卡(2)
23 0
|
8月前
|
JavaScript
JS 学习笔记一 (基础)
JS 学习笔记一 (基础)
46 0
|
8月前
|
JavaScript 前端开发
JS 学习笔记四(DOM) 悬停事件 获取节点
JS 学习笔记四(DOM) 悬停事件 获取节点
38 0
|
8月前
|
JavaScript
JS 学习笔记四(DOM)(节点)
JS 学习笔记四(DOM)(节点)
31 0
|
8月前
|
JavaScript 前端开发 Java
js学习笔记
js学习笔记
37 0
|
9月前
|
前端开发
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点
前端学习笔记202305学习笔记第三十三天-js-使用const声明变量特点2
44 0