JavaWeb JavaScript 6.事件

L_cl

已于 2024-09-02 12:13:04 修改

阅读量346

点赞数 4

分类专栏： JavaWeb 前端前端前端文章标签：前端

于 2024-08-29 16:59:27 首次发布

本文链接：https://blog.csdn.net/m0_73983707/article/details/141591843

版权

前端前端前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaWeb

13 篇文章 0 订阅

订阅专栏

你摸黑偷偷赶得路，都会变成意外来袭时你少受的苦

—— 24.8.29

一、什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为。
当一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生，JS的事
件驱动指的就是行为触发代码运行的这种特点

二、事件的绑定方式

① 通过元素的属性绑定 on ***

② 通过DOM编程动态绑定

注意：一个事件可以同时绑定多个函数

三、常见事件

1.鼠标事件

① onmouseover —— 鼠标悬停

② onmousemove —— 鼠标移动

③ onmouseleave —— 鼠标离开

④ onclick —— 单击

⑤ ondblclick —— 双击

2.键盘事件

① onkeydown —— 键盘的按下

② onkeyup —— 键盘的开启

3.表单事件

① onfocus —— 获取焦点事件

② onblur —— 失去焦点事件

③ onsubmit —— 表单提交事件

④ onreset —— 表单重置事件

4.页面加载事件

onload

5.常见事件演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myFunction1() {
            console.log('你单击了按钮1！')
        }

        function myFunction2() {
            console.log('你点击了按钮2！')
        }

        function myFunction3() {
            console.log('你双击了按钮3！')
        }   

        function myFunction4() {
            console.log('你按下了回车键！')
        }

        function myFunction5() {
            console.log('你按下了Esc键！')
        }   

        function myFunction6() {
            console.log('你按下了空格键！')
        }   

        function myFunction7() {
            console.log("鼠标悬停了！")
        }

        function myFunction8() {
            console.log("鼠标移出了！")
        }

        function myFunction9() {
            console.log("鼠标移动了！")
        }

        function myFunction10() {
            console.log("键盘按下了！")
        }

        function myFunction11() {
            console.log("键盘松开了！")
        }

        /*
            1.事件的绑定方式
                ① 通过元素的属性绑定 on***
                ② 通过DOM编程动态绑定
                注意事项：一个事件可以同时绑定多个函数

            2.常见的事件
                ① 鼠标事件 onmouseover（鼠标悬停）、onmousemove（鼠标移动）、onmouseleave（鼠标离开）、onclick(单击)、ondblclick（双击）
                ③ 键盘事件 onkeydown（键盘的按下）、onkeyup（键盘的开启）、onkeypress（某个键盘按键被按下并松开）
                ③ 表单事件 onfocus(获取焦点事件)、onblur（失去焦点事件）、onsubmit（表单提交事件）、onreset（表单重置事件）
                ④ 页面加载事件 onload

            3.事件的触发
                ① 行为触发
                ② DOM编程触发
        */

        function testFocus() {
            console.log("获取焦点了！")
        }

        function testBlur() {
            console.log("失去焦点了！")
        }

        function testSubmit() {
            console.log("提交了！")
        }

        function testChange(value) {  
            console.log("内容改变为："+value)
        }

        function testChange2(){
            console.log("选项改变了！")
        }

        function testSubmit(){
            /*
            弹窗的三种方式
            alert("表单发生提交了！");  信息提交框
            confirm("你确定要提交吗？")     信息确认框
            prompt("请输入你的评论：")      信息输入框
            */
           var result = confirm("你确定要提交吗？");
           if(result){
               alert("表单发生提交了！");
           }else{
               alert("表单未提交！");
               event.preventDefault();// 阻止组件的默认提交行为，可以动态选择
           }
        }

        function testReset(){
        console.log("表单重置了！")
        }    
    </script>


</head>
<body>
    <!-- 鼠标事件 -->
    <input 
        type="button"
        value="按钮"
        onclick="myFunction1(), myFunction2()"
        ondblclick="myFunction3()"
    >
    <br>

    <!-- 键盘事件 -->
    <img src="img/夕阳.jpg" onmouseover="myFunction7()" onmouseout="myFunction8()" onmousemove="myFunction9()">
    <br>
    <input type="text" onkeydown="myFunction10()" onkeyup="myFunction11()">
    <br>

    <!-- 表单事件 -->
    <form action="01JS引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
        用户昵称：<input 
            type="text" 
            name="realName" 
            onfocus="testFocus()"
            onblur="testBlur()"
            onchange="testChange(this.value)"
            > <br>
        登陆账号：<input 
            type="text" 
            name="logoinName"
            onfocus="testFocus()"
            onblur="testBlur()"
            onchange="testChange()"
        ><br>
        选择籍贯：
        <select 
            name="province"
            onchange="testChange2()">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        密码：<input 
            type="password" 
            name="password"
            onfocus="testFocus()"
            onblur="testBlur()"
            onchange="testChange()"
            ><br>
        <input 
            type="submit" 
            value="注册"
            >
        <input 
        type="reset" 
        value="重置">
        <br>
</body>
</html>

四、事件的触发

1.行为触发

2.DOM编程触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            1.事件的绑定方式
                ① 通过元素的属性绑定 on***
                ② 通过DOM编程动态绑定
                注意事项：一个事件可以同时绑定多个函数

            2.常见的事件
                ① 鼠标事件 onmouseover（鼠标悬停）、onmousemove（鼠标移动）、onmouseleave（鼠标离开）、onclick(单击)、ondblclick（双击）
                ③ 键盘事件 onkeydown（键盘的按下）、onkeyup（键盘的开启）、onkeypress（某个键盘按键被按下并松开）
                ③ 表单事件 onfocus(获取焦点事件)、onblur（失去焦点事件）、onsubmit（表单提交事件）、onreset（表单重置事件）
                ④ 页面加载事件 onload （页面加载完成事件）、onunload（页面卸载事件）

            3.事件的触发
                ① 行为触发
                ② DOM编程触发
        */
    </script>    

    <script>
        function ready(){
            // 通过DOM获得要操作的元素
            var btn = document.getElementById("btn1");
            // 绑定一个单击事件，直接声明一个函数
            btn.onclick = function(){
            alert("按钮被单击了！");
            }
        }

        window.onload = function(){
            // 为div1绑定单击事件，单击变红
            var div1 = document.getElementById("d1");
            div1.onclick = function(){
                div1.style.backgroundColor = "red";
            }

            // 通过DOM获得要操作的元素
            var btn = document.getElementById("btn1");
            // 绑定一个单击事件，直接声明一个函数
            btn.onclick = function(){
                alert("按钮被单击了！");
                // 通过DOM编程动态绑定一个事件，相当于某些事件被触发了
                div1.onclick();     // 触发div的单击事件
            }
        }

    </script>

    <style> 
        .div1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="d1" class="div1">

    </div>
    <button id="btn1">按钮</button>
</body>
<!-- 
<body onload="ready()">
    <button id="btn1">按钮</button>
</body> 
-->
</html>