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

最新推荐文章于 2023-10-06 02:00:16 发布

程序员丶星霖

最新推荐文章于 2023-10-06 02:00:16 发布

阅读量587

点赞数

分类专栏：前端技术文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/HunterArley/article/details/128145142

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、事件的概念

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

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

二、常见事件

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

三、事件绑定的方式

3.1 普通函数方式

设置标签的属性

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

3.2 匿名函数方式

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

3.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的事件驱动</title>
</head>
<body>
<!--
    什么是事件驱动：让文档中的标签能响应用户的交互动作
    事件驱动中的要素：
        1. 事件源：事件发生在哪
        2. 事件类型：用户的交互动作是什么
        3. 事件源与事件类型进行绑定：要给谁绑定一个什么事件
        4. 绑定之后，当事件触发要指定执行的函数
-->
    <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>

四、事件的使用介绍

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>

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>

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>