JavaScript语法基础之事件基础(鼠标、表单、页面事件等)

目录

[1. 事件基础](#1. 事件基础)

[1.1. 事件是什么?](#1.1. 事件是什么?)

[1.2. 事件调用方式](#1.2. 事件调用方式)

[1.2.1. 在 script 标签中调用](#1.2.1. 在 script 标签中调用)

[1.2.2. 在元素中调用事件](#1.2.2. 在元素中调用事件)

[1.3. 鼠标事件](#1.3. 鼠标事件)

[1.3.1. 鼠标单击](#1.3.1. 鼠标单击)

[1.4. 表单事件](#1.4. 表单事件)

[1.4.1. onfocus & onblur](#1.4.1. onfocus & onblur)

[1.5. 页面事件](#1.5. 页面事件)

[1.5.1. onload](#1.5.1. onload)


1. 事件基础

1.1. 事件是什么?

  • 举个例子,当我们点击一个按钮时,会弹出一个对话框。其中点击就是一个事件,弹出对话框就是我们在点击这个事件里面做的一些事情。
  • JavaScript 中,事件一般是用户对页面的一些小动作引起的,例如按下鼠标、移动鼠标等,这些都会触发相应的一个事件。
  • JavaScript 常见的事件共有以下 5 种:
    • 鼠标事件
    • 键盘事件
    • 表单事件
    • 编辑事件
    • 页面事件
  • 事件操作是 JavaScript 的核心,可以这样说:不懂事件操作,JavaScript 等于白学。

1.2. 事件调用方式

  • JavaScript 中,调用事件的方式有两种:
    • script 标签中调用
    • 在元素中调用

1.2.1. 在 script 标签中调用

  • script 标签中调用事件,指的是在<script></script>标签内部调用事件。
  • 语法:

    obj.事件名 = function(){
    ......
    };

  • 举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { //获取元素 var oBtn = document.getElementById("btn"); //为元素添加点击事件 oBtn.onclick = function () { alert("Gok"); }; }; </script> </head> <body> </body> </html>

1.2.2. 在元素中调用事件

  • 在元素中调用事件,指的是直接在HTML属性中来调用事件,这个属性又叫做"事件属性"。
  • 举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function alertMes() { alert("Gok"); } </script> </head> <body> </body> </html>

1.3. 鼠标事件

  • JavaScript 中,常见的鼠标事件如下表所示。

|---------------|--------|
| 事件 | 说明 |
| onclick | 鼠标单击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onmousedown | 鼠标按下事件 |
| onmouseup | 鼠标松开事件 |
| onmousemove | 鼠标移动事件 |

1.3.1. 鼠标单击

  • 单击事件 onclick 我们在之前已经接触过非常多了,例如点击某个按钮弹出一个提示框。
  • 这里要特别注意一点,单击事件不只是按钮才有,任何元素我们都可以为它添加单击事件!
  • 举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = alertMes; function alertMes() { alert("Gok!"); } }; </script> </head> <body> </body> </html>

1.4. 表单事件

  • JavaScript 中,常用的表单事件有 3 种:
    • onfocusonblur
    • onselect
    • onchange
  • 实际上除了上面这几个,还有一个 onsubmit 事件。
  • 不过 onsubmit 事件一般都是结合后端技术来使用,所以暂时可以不管。

1.4.1. onfocus & onblur

  • onfocus 表示获取焦点时触发的事件,而 onblur 表示失去焦点时触发的事件,两者是相反操作。
  • onfocusonblur 这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时,此时它会获得光标,就会触发 onfocus 事件。当文本框失去光标时,就会触发 onblur 事件。
  • 并不是所有的 HTML 元素都有焦点事件,具有获取焦点失去焦点特点的元素只有 2 种:
    • 表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)
    • 超链接
  • 举例:搜索框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #search { color: #bbbbbb; } </style> <script> window.onload = function () { //获取元素对象 var oSearch = document.getElementById("search"); //获取焦点 oSearch.onfocus = function () { if (this.value === "百度一下,你就知道") { this.value = ""; } }; //失去焦点 oSearch.onblur = function () { if (this.value === "") { this.value = "百度一下,你就知道"; } }; }; </script> </head> <body> </body> </html>

1.5. 页面事件

1.5.1. onload

  • JavaScript 中,onload 表示文档加载完成后再执行的一个事件。
  • 语法:

    window.onload = function(){
    ......
    }

  • 举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("JavaScript"); }; }; </script> </head> <body> </body> </html>
相关推荐
一只小风华~17 小时前
Vue: 侦听器(Watch)
前端·javascript·vue.js
GDAL17 小时前
Knockout.js 备忘录模块详解
javascript·knockout
枫叶丹417 小时前
【Qt开发】显示类控件(三)-> QProgressBar
开发语言·qt
蓝胖子的多啦A梦17 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼17 小时前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet17 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
lypzcgf18 小时前
Coze源码分析-资源库-创建知识库-基础设施/存储/安全
安全·go·coze·coze源码分析·智能体平台·ai应用平台·agent开发平台
阿部多瑞 ABU18 小时前
《学校机房终端安全全链条攻防分析与防御体系建设报告》
网络·安全
江城开朗的豌豆18 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了18 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css