JavaScript快速入门四

小哼快跑

已于 2024-01-23 23:07:40 修改

阅读量1.2k

点赞数 31

分类专栏： Java Web专栏文章标签： javascript 前端开发语言事件

于 2024-01-23 23:02:38 首次发布

本文链接：https://blog.csdn.net/weixin_45754463/article/details/135796089

版权

Java Web专栏专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

- 事件

事件

概述：某些组件被执行了某些操作后，触发了某些代码的执行

事件的绑定

方法一：直接在 HTML 标签上，指定事件的属性，属性值就是 JavaScript 代码
```
<img src="" alt="资源正在加载" onclick="confirm('5+5=10对吗？')">
```

方法二：通过 JavaScript 获取到元素对象，指定事件的属性，设置一个函数

<img src="" alt="资源正在加载" id="light">
<script>
    var light = document.getElementById("light");
    light.onclick = function (){
        alert("点我干嘛");
    }
</script>

事件监听机制

概述：某些组件被执行了某些操作后，触发了某些代码的执行
- 事件：某些操作，例如、单击、双击、键盘按下、鼠标移动等
- 事件源：组件，例如、按钮文本输入框等
- 监听器：代码
- 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码

常见事件

点击事件

关键字	作用
onclick	单击事件
ondblclick	双击事件

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
        div{
            width: 80px;
            height: 80px;
            background-color: red;
            margin: 20px;
            padding: 40px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p>单击变色中国</p>
    </div>
    <div id="div2">
        <p>双击隐藏郑州</p>
    </div>
    <script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.onclick = function (){
            div1.style.backgroundColor='orange';
        }
        div2.ondblclick = function (){
            div2.style.visibility='hidden';
        }
    </script>
</body>
</html>

焦点事件

关键字	作用
onblur	失去焦点（一般）
onfocus	元素获得焦点

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
    <input type="text" id="username" placeholder="请输入姓名">
    <input type="button" id="btn" value="点我，让我消失">
    <script>
        var username = document.getElementById("username");
        var btn = document.getElementById("btn");
        // 失去焦点时，元素背景颜色变成 橙色
        username.onblur = function(){
            username.style.backgroundColor = "orange";
        }
        // 获取焦点时，让按钮消失
        btn.onfocus = function(){
            btn.style.visibility = "hidden";
        }
    </script>
</body>
</html>

加载事件

关键字	作用
onload	一张页面或一副图像完成加载

示例代码（自己去下载太阳和月亮的图片，替换自己的路径）

<!DOCTYPE html>
<html>
<head>
    <title>图片自动变换示例</title>
    <script>
        // 2秒后，执行此函数，切换照片
        setTimeout(function changeImage() {
            var image = document.getElementById('myImage');
            image.src = '../../img/moon.jpg'; // 替换成月亮的图片
        },2000);
    </script>
</head>
<body onload="changeImage()">
    <img id="myImage" src="../../img/sun.jpg" alt="太阳">
</body>
</html>

鼠标事件

关键字	作用
onmousedown	鼠标按钮被按下（定义方法时，定义一个形参，接收event对象，event的button属性可以知道那个按钮点击了）
onmouseup	鼠标按键松开
onmousemove	鼠标被移动
onmouseover	鼠标移动到某元素之上
onmouseout	鼠标从某元素移开

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
    <input type="button" id="btn1" value="点我">
    <input type="button" id="btn2" value="点我">
    <input type="button" id="btn3" value="移动鼠标看看我的变化">
    <input type="button" id="btn4" value="将鼠标移动到我身上试试，移走再试试">
    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var btn5 = document.getElementById("btn5");
        // 鼠标按键按下
        btn1.onmousedown = function (event){
            if(event.button == 0){
                btn1.value = "鼠标左键踩到我了";
            }else if(event.button == 1){
                btn1.value = "鼠标滚轮踩到我了";
            }else if(event.button == 2){
                btn1.value = "鼠标右键踩到我了";
            }
        }
        // 鼠标按键松开
        btn2.onmouseup = function (){
            btn2.value = "别松开我啊";
        }
        // 鼠标移动
        btn3.onmousemove = function (){
            btn3.value = "鼠标移动了";
            btn3.style.backgroundColor = "yellow";
        }
        // 鼠标移动按钮上
        btn4.onmouseover = function (){
            btn4.style.backgroundColor = "red";
        }
        // 鼠标移动开按钮
        btn4.onmouseout = function (){
            btn4.style.backgroundColor = "";
        }
    </script>
</body>
</html>

键盘事件

关键字	作用
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
    <p id="p1">输出那个按键被按下</p>
    <p id="p2">输出那个按键被松开</p>
    <p id="p3">那个按键被按下并松开</p>
    <input type="text" id="btn1" placeholder="请按下键盘按键">
    <input type="text" id="btn2" placeholder="请按下键盘按键">
    <input type="text" id="btn3" placeholder="请按下键盘按键">
    <script>
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        var p3 = document.getElementById("p3");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        btn1.onkeydown = function (event){
            var key = event.keyCode;
            p1.innerHTML = "被按下的按键是："+key + "<br>";
        }
        btn2.onkeyup = function (event){
            var key = event.keyCode;
            p2.innerHTML = "被松开的按键是："+key + "<br>";
        }
        // 显示的是大写字母的 ASCII 码值
        btn3.onkeypress = function (event){
            var key = event.keyCode;
            p3.innerHTML = "按下又松开的按键是："+key + "<br>";
        }
    </script>
</body>
</html>

选择和改变

关键字	作用
onchange	域的内容被改变（可用作下拉列表）
onselect	文本被选中

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择和改变事件</title>
</head>
<body>
    <!-- 下拉列表 -->
    <select type="select" id="city">
        <option value="0">--请选择城市--</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">郑州</option>
    </select>
    <!-- 文本域 -->
    <textarea id="myTextarea" style="width: 300px; height: 100px;">
        选择一些文本，你好，欢迎来到编程世界！我是小哼，我们一起共同进步。
    </textarea>
    <script>
        var city = document.getElementById("city");
        var myTextarea = document.getElementById("myTextarea");
        // 下拉列表选中
        city.onchange = function (){
            // 获取下拉列表选择值
            var selectValue = city.value;
            // 进行判断
            if(selectValue == 1){
                alert("北京");
            }else if(selectValue == 2){
                alert("上海");
            }else if(selectValue == 3){
                alert("深圳");
            }else if(selectValue == 4){
                alert("郑州");
            }else{
                alert("不好意思，其他城市暂未开通");
            }
        }
        // 文本选中
        myTextarea.onselect = function (){
            // 获取被选择的文本
            var selectText = window.getSelection().toString();
            alert(selectText);
        }
    </script>
</body>
</html>

表单事件

关键字	作用
onsubmit	确认按钮被点击（可以阻止表单提交）
onreset	重置按钮被点击

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>表单事件</title>
    <meta charset="utf-8">
    <script>
        function handleSubmit() {
            // 阻止表单的默认提交行为
            event.preventDefault();

            // 获取表单中的输入值
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            // 在控制台输出输入值
            alert('Username: ' + username);
            alert('Password: ' + password);
        }

        function handleReset() {
            // 重置表单后的操作
            alert('输入框已重置');
        }
    </script>
</head>
<body>
<form onsubmit="handleSubmit()" onreset="handleReset()">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</body>
</html>