JavaScript—认识事件和事件类型

最新推荐文章于 2022-09-08 19:37:17 发布

九阈

最新推荐文章于 2022-09-08 19:37:17 发布

阅读量507

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46048542/article/details/122858402

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

请添加图片描述

        绑定事件
        1、内联模式
        2、外联模式/脚本模式（最多）
        绑定事件格式：
        元素节点.on + 事件类型 = 匿名函数
        click 事件类型
        onclick 事件处理的函数

内联模式

<!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>Document</title>
    <script>
        function btnClick(){
            alert("内联模式");
        }
    </script>
</head>
<body>
    <button onclick="btnClick();">内联模式</button>
</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>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                alert("外联模式");
            }
        }
    </script>
</head>
<body>
    <button id="btn1">外联模式</button>
</body>
</html>

事件类型的种类

       （1）鼠标事件
        click  单击
        dblclick 双击
        mouseover  鼠标移入
        mouseout   鼠标移出
        mousemove  鼠标移动（会不停的触发）
        mousedown  鼠标按下
        mouseup    鼠标抬起
        mouseenter 鼠标移入
        mouseleave 鼠标移出
        绑定事件格式：
        元素节点.on + 事件类型 = 匿名函数
        （2）键盘事件

        （3）HTML事件
        1、window事件
        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>Document</title>
    <style>
        #div1{width: 200px;height: 200px;background-color: red;}
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            // oBtn.ondbclick = function(){
            //     alert("双击");
            // }

            oBtn.onmousemove = function(){
                this.style.backgroundColor = 'blue';
            }

            oBtn.onmouseout = function(){
                this.style.backgroundColor = 'red';
            }

            var oDiv = document.getElementById("div1");
            var i = 0;
            oDiv.onmousemove = function(){
                this.innerHTML = i++;
            }
        }
    </script>
</head>
<body>
    <button id="btn1">按钮</button>
    <div id = 'div1'></div>
</body>
</html>

mousedown 鼠标按下
mouseup 鼠标抬起

    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");

            oBtn.onmousedown = function(){
                this.innerHTML = "按下";
            }

            oBtn.onmouseup = function(){
                this.innerHTML = "抬起";
            }
        }
    </script>

<body>
    <button id="btn1">按钮</button>
</body>

mouseover 鼠标移入和mouseout 鼠标移出经过子节点会重复触发
mouseenter 鼠标移入和mouseleave 鼠标移出是经过子节点不会重复触发。TE8以后才有。
（2）键盘事件（表单元素，全局window）
keydown 键盘按下（如果按下不放手，会一直触发）
keyup 键盘抬起
keypress 键盘按下（只支持字符键）
绑定事件格式：
元素节点.on + 事件类型 = 匿名函数

    <script>
        window.onload = function(){
            var i = 0;
            window.onkeydown = function(){
                document.title = i++;
            }

            window.onkeyup = function(){
                document.title = '抬起'
            }
        }
    </script>

（3）HTML事件
1、window事件
load 当页面加载完成以后会触发
unload 当页面解构的时候触发（刷新页面，关闭当前页面）
scroll 页面滚动
resize 窗口大小发生变化的时候触发
2、表单事件
blur 失去焦点
focus获取焦点
select当我们在输入框内选中文本的时候触发
change当我们对输入框的文本进行修改并且失去焦点的时候
【注】必须添加到form元素上
submit当我们点击submit上的按钮才能触发
reset当我们点击reset上的按钮才能触发
绑定事件格式：
元素节点.on + 事件类型 = 匿名函数
window事件举个列子

<!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>Document</title>
    <script>
        window.onload = function(){
            var i = 0;
            window.onscroll = function(){
                document.title = i++;
            }

            window.onresize = function(){
                document.title = i++;
            }
        }
    </script>
</head>
<body style="height: 300px;">
    <h1>hello world</h1>
</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>Document</title>
    <script>
        window.onload = function(){
            var oInput1 = document.getElementById("input1");

            /*oInput1.onblur = function(){
                this.value = "失去焦点";
            }
            oInput1.onfocus = function(){
                this.value = "获取焦点";
            }*/
            
            
            // oInput1.onselect = function(){
            //     alert("被选中了");
            // }
             oInput1.onchange = function(){
                 alert("被修改了");
             }

        }
    </script>
</head>
<body style="height: 300px;">
    <input value="默认文本" id="input1" type="text">
</body>
</html>

（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>Document</title>
    <script>
        window.onload = function(){
            var oF1 = document.getElementById("f1");
            oF1.onsubmit = function(){
                alert("提交");
            }
            oF1.onreset = function(){
                alert("重置");
            }
        }
    </script>
</head>
<body style="height: 3000px;">
    <form id = 'f1'>
        <input type="text">
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>