零基础入门JavaWeb——JS的事件驱动

一、事件的概念

HTML事件是发生在HTML元素上的“事情”，是浏览器或用户做的某些事情。

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

二、常见事件

属性	此事件发生在何时
onclick	当用户点击某个对象时调用的事件句柄
ondblclcik	当用户双击某个对象时调用的事件句柄
onchange	域的内容被改变
onblur	元素失去焦点
onfocus	元素获得焦点
onload	一张页面或一幅图像完成加载
onsubmit	确认按钮被点击；表单被提交
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按住
onkeyup	某个键盘按键被松开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onmousemove	鼠标被移动

三、事件绑定的方式

3.1 普通函数方式

设置标签的属性

<标签  属性="JS代码，调用函数">标签>
1

3.2 匿名函数方式

    <script>
        标签对象.事件属性 = function () {
            // 执行代码块
        }
    script>
1
2
3
4
5

3.3 示例代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的事件驱动title>
head>
<body>

    <input type="button" value="按钮" onclick="fn1()"><br/>
    <input type="button" id="btn" value="另一个按钮"><br/>
    <script>
        function fn1() {
            alert("我被点击了")
        }

        // 另一种绑定事件的方式：动态绑定，使用js代码进行事件绑定
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("我也被点击了.....")
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

四、事件的使用介绍

4.1 内容改变

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change事件title>
head>
<body>
<select onchange="fn1(this)">
    <option value="bj">北京option>
    <option value="sh">上海option>
    <option value="sz">深圳option>
select>

<script>
    // 目标：当下拉框的城市名发生改变的时候，获取当前下拉框显示的城市名
    function fn1(obj) {
        // 要获取当前下拉框的内容，其实就是获取当前select对象的文本（innerText）
        console.log("我的内容改变了...."+obj.value)
    }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.2 获得焦点（onfocus）和失去焦点（onblur）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件title>
head>
<body>
    <input type="text" id="ipt" onfocus="fn1()"/>
<script>
    // 目标：给输入框绑定获取和失去焦点事件
    function fn1(){
        console.log("我获取焦点了.....")
    }

    // onblur表示失去焦点
    document.getElementById("ipt").onblur = function () {
        console.log("我失去焦点了.....")
    }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.3 键盘、鼠标相关事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘和鼠标事件title>
head>
<body>
    <input type="text" onmouseover="fn1()" onmouseout="fn2()" onkeydown="fn3(this)" onkeyup="fn4(this)">
    <script>
        // onmouseover是鼠标移入事件
        function fn1() {
            console.log("鼠标移入了...")
        }

        // onmouseout是鼠标移出事件
        function fn2() {
            console.log("鼠标移出了...")
        }

        //onkeydown是键盘按下事件，此时键盘的字符并未进入输入框
        function fn3(obj) {
            console.log("键盘按下事件..."+obj.value)
        }

        //onkeyup是键盘抬起事件，此时键盘的字符已经进入输入框
        function fn4(obj) {
            console.log("键盘抬起事件..."+obj.value)
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

学海无涯苦作舟

相关阅读:
【那些年那些题】轮转数组
带你彻底搞懂缓冲区
ROS学习（24）plugin插件
SpringCloud解决feign调用token丢失问题
使用kubekey的all-in-one安装K8S1.24及KubeSphere3.3
【算法】反悔贪心
基于JavaSwing开发记事本程序(新功能替换查找撤销状态栏) 课程设计大作业源码
Hexagon_V65_Programmers_Reference_Manual（43）
vue（十四）——vue3新特性之组合式api（二）
react常用api

原文地址：https://blog.csdn.net/HunterArley/article/details/128145142