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中，常见的鼠标事件如下表所示。
事件
说明
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>
<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>
版权归原作者 苏苏渗透大师 所有， 如有侵权，请联系我们删除。