JavaScript语法基础之事件基础(鼠标、表单、页面事件等)
目录
1. 事件基础
1.1. 事件是什么?
1.2. 事件调用方式
1.2.1. 在 script 标签中调用
1.2.2. 在元素中调用事件
1.3. 鼠标事件
1.3.1. 鼠标单击
1.4. 表单事件
1.4.1. onfocus & onblur
1.5. 页面事件
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><input id="btn" type="button" value="弹出" /></body>
</html>
1.2.2. 在元素中调用事件
- 在元素中调用事件,指的是直接在
HTML
属性中来调用事件,这个属性又叫做“事件属性”。
- 举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>function alertMes() {alert("Gok");}</script></head><body><input type="button" onclick="alertMes()" value="弹出" /></body>
</html>
1.3. 鼠标事件
- 在
JavaScript
中,常见的鼠标事件如下表所示。
事件 | 说明 |
| 鼠标单击事件 |
| 鼠标移入事件 |
| 鼠标移出事件 |
| 鼠标按下事件 |
| 鼠标松开事件 |
| 鼠标移动事件 |
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><input id="btn" type="button" value="按钮" /></body>
</html>
1.4. 表单事件
- 在
JavaScript
中,常用的表单事件有 3 种:
-
onfocus
和onblur
-
onselect
-
onchange
- 实际上除了上面这几个,还有一个
onsubmit
事件。
- 不过
onsubmit
事件一般都是结合后端技术来使用,所以暂时可以不管。
1.4.1. onfocus & onblur
onfocus
表示获取焦点时触发的事件,而onblur
表示失去焦点时触发的事件,两者是相反操作。
onfocus
和onblur
这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时,此时它会获得光标,就会触发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>
<input id="search" type="text" value="百度一下,你就知道" />
<input type="button" value="搜索" />
</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><input id="btn" type="button" value="提交" /></body>
</html>