JS-05-JS中的事件
JS-05-JS中的事件
1.常用事件
type | 事件 | 描述 |
---|---|---|
焦点相关 | focus | 获得焦点 |
blur | 失去焦点 | |
键盘相关 | keydown | 键盘键按下 |
keyup | 键盘键弹起 | |
鼠标相关 | click | 鼠标单击 |
dblclick | 鼠标双击 | |
mousedown | 鼠标按下 | |
mouseover | 鼠标经过 | |
mousemove | 鼠标移动 | |
mouseout | 鼠标离开 | |
mouseup | 鼠标弹起 | |
表单相关 | reset | 表单重置 |
submit | 表单提交 | |
下拉列表相关 | change | 下拉列表选中项该表,或文本框内容改变 |
页面相关 | load | 页面加载完毕 |
文本相关 | select | 文本被选定 |
2.注册事件的两种方式
任何一个事件都会对应一个事件句柄,事件句柄是在事件前加一个on。
onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在)
2.1第一种方式注册事件以及回调函数的概念
直接在标签中使用事件句柄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册事件</title>
</head>
<body>
<!-- 注册事件的第一种方式 -->
<input type="button" value="btn1" onclick="fun1()">
<script type="text/javascript">
//对于当前程序来说,fun1函数被称为回调函数(callback函数)
function fun1() {
alert("Hello World");
}
</script>
</body>
</html>
对于当前程序来说,fun1函数被称为回调函数(callback函数)
那么,什么是回调函数呢?
回调函数的特点:这个函数是我编写的,但我不负责调用,由其他程序负责调用该函数。
<input type="button" value="btn1" onclick="fun1()">
以上语句的含义:把fun1函数注册到btn1按钮上去,等待click事件发生后,该函数被浏览器调用。
我们称这个fun1函数为回调函数
在java中也有回调函数机制:
public class Dog{
//站在walk方法的编写者角度来看,这个walk方法就叫做回调函数
public static void walk() {
System.out.println("狗在走路");
}
}
public class Person{
public static void main() {
//站在主动调用walk方法的调用者来看,walk方法叫做正向调用
Dog.walk();
}
}
2.2第二种方式注册事件
第二种方式就是使用纯JS代码完成事件的注册。
注册步骤:
- 第一步:先获取这个按钮对象
- 通过使用内置对象document调用getElementById("按钮id")方法来获取
- document代表整个HTML页面,全部小写。
- 第二步:将回调函数注册到按钮的click事件上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册事件</title>
</head>
<body>
<!-- 注册事件的第一种方式 -->
<!-- 按钮1 -->
<input type="button" value="btn1" onclick="fun1()">
<!-- 按钮2 -->
<input type="button" value="btn2" id="btn2">
<script type="text/javascript">
//回调函数1
function fun1() {
alert("Hello World");
}
//回调函数2
function fun2() {
alert("Hello JS");
}
//注册事件的第二种方式
//通过按钮2的id获得按钮2的对象
var btnObj = document.getElementById("btn2");
//将回调函数2注册到按钮2的click事件上
btnObj.onclick = fun2;//注意:这里不要在方法后面加小括号
</script>
</body>
</html>
此外,还可以使用匿名函数来进行注册:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册事件</title>
</head>
<body>
<!-- 按钮3 -->
<input type="button" value="btn3" id="btn3">
<script type="text/javascript">
//使用匿名函数
var objBtn3 = document.getElementById("btn3");
//这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数
objBtn3.onclick = function() {
alert("Hello fun3");
}
</script>
</body>
</html>
3.代码的执行顺序
3.1load事件
试执行下面程序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码执行顺序</title>
</head>
<body>
<script type="text/javascript">
document.getElementById("btn1").onclick = function() {
alert("Hello btn1");
}
</script>
<!-- 按钮1 -->
<input type="button" value="btn1" id="btn1">
</body>
</html>
从报错信息可见,获取按钮对象为null。
由于在JS中,代码是从上到下逐行执行的。
在获取btn1的对象时,btn1还未被创建出来,就好比空指针异常。
如何解决呢?
可以使用load事件解决:
load事件的特点是,在页面加载完毕后才开始执行。
将所需执行的回调函数a放入另一个回调函数b中,然后将回调函数b注册给一个load事件。
页面打开过程:
- 页面加载的过程中,将b函数注册给了load事件。
- 页面加载完毕之后,load事件发生了,此时执行回调函数b。
- 回调函数b执行过程中,把函数a注册给了id="btn1"的click事件中。
- 当id="btn1"的节点发生click事件后,a函数被调用并执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码执行顺序</title>
</head>
<body>
<script type="text/javascript">
//将回调函数放进由
window.onload = function() {//回调函数b
document.getElementById("btn1").onclick = function() {//回调函数a
alert("Hello btn1");
}
}
</script>
<!-- 按钮1 -->
<input type="button" value="btn1" id="btn1">
</body>
</html>
3.2点击按钮切换文本框为复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击切换按钮为复选框</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn1").onclick = function() {
var text1 = document.getElementById("text1");
//修改text1的type属性
text1.type="checkbox";
}
}
</script>
<input type="text" id="text1">
<!-- 按钮1 -->
<input type="button" value="btn1" id="btn1">
</body>
</html>
4.通过keydown事件演示回车键13,ESC键27
在一些登录界面上,我们在输入完用户信息后,往往直接按下回车键就可以登录上去,这是如何做到的呢?
4.1浏览器调用回调函数时是否传入了参数?传入了几个,代表着什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keyup&keydown</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var btn1 = document.getElementById("btn1").onclick = function(event,event2,event3) {
alert(event);//[object MouseEvent]
alert(event2);//undefined
alert(event3);//undefined
}
}
</script>
<input type="button" value="测试参数数量" id="btn1">
</body>
</html>
由结果来看,当打开页面时,浏览器会传入1个参数给回调函数。
那么这个参数代表什么呢?
这个参数[object MouseEvent]代表的是当前的鼠标事件对象。
同理,在发生keydown事件时,浏览器也会给回调函数传入其对应的键盘事件对象。
keydown事件是当按下键盘按键时发生的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keyup&keydown</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("username").onkeydown = function(event) {
alert(event);//[object KeyboardEvent]
}
}
</script>
<!-- 文本框 -->
<input type="text" id="username">
</body>
</html>
4.2获取键盘事件对象的键值
键盘上每一个按键都对应了一个键值,可以通过访问键盘事件对象的keyCode属性获取。
下面分别测试按下回车键和Esc键的键值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keyup&keydown</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("username").onkeydown = function(event) {
//回车键:13
//Esc键:27
alert(event.keyCode);
}
}
</script>
<input type="text" id="username">
</body>
</html>
经过测试,得出:
- 回车键键值:13
- Esc键键值:27
4.3捕捉回车键
有了回车键的键值,我们就可以将其作为限制条件,来设置只有当按下回车键后才实现函数内的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keyup&keydown</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("username").onkeydown = function(event) {
if(13 === event.keyCode) {
alert("Hello World");
}
}
}
</script>
<input type="text" id="username">
</body>
</html>