JS-05-JS中的事件

最新推荐文章于 2024-03-19 10:28:51 发布

TSCCG

最新推荐文章于 2024-03-19 10:28:51 发布

阅读量112

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/TSCCG/article/details/119360957

版权

Web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>