【JavaScript】常见的事件(鼠标、键盘、表单等)

news2024/9/22 1:40:27

💻【JavaScript】常见的事件 🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【JavaScript】常见的事件(鼠标、键盘、表单等)
- 一. 常见的鼠标事件
- 二. 常见的键盘事件
- 三. 常见的表单事件
- 四. 常见的触摸事件
- 五. 常见的拖拽事件

【JavaScript】常见的事件(鼠标、键盘、表单等)

一. 常见的鼠标事件

鼠标事件	描述
onclick	鼠标点击左键触发
ondblclick	鼠标左键双击触发
oncontextmenu	鼠标右键单击触发
onmouseover	鼠标移入触发
onmouseout	鼠标移出触发
onmouseenter	鼠标移入事件
onmousele	鼠标移出事件
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标抬起触发
onmousedown	鼠标按下触发

onmouseenter和onmouseleave与onmouseover和onmousemove的区别：

onmouseover 和 onmouseout 在鼠标移入到子元素上依然可以触发
onmouseenter 和 onmouseleave 在鼠标移入子元素的时候，不会触发

二. 常见的键盘事件

键盘事件

可以给所有元素绑定键盘事件, 不是所有元素都能触发键盘事件
一般给 window/document/表单元素绑定键盘元素
键盘事件不考虑中文

键盘事件	描述
onkeydown	键盘按下事件
onkeyup	键盘抬起事件
onkeypress	键盘键入事件

注意：onkeypress事件按下的内容必须和出现的内容一致

三. 常见的表单事件

表单事件	描述
onfocus	表单空间获取焦点
onblur	表单失去焦点
onchange	表单内容改变
oninput	表单输入事件
onsubmit	表单提交事件
onreset	表单重置事件

注意点：

onchange：文本框要求获取焦点和失去焦点内容不一样的时候会触发
oninput：只要输入或删除就会触发
表单提交和重置都必须绑定在form表单域上面

四. 常见的触摸事件

触摸事件	描述
ontouchstart	开始触摸
ontouchmove	触摸移动
ontouchend	触摸结束

五. 常见的拖拽事件

拖拽事件	描述
ondragstart	开始拖拽
ondrag	拖拽移动
ondragend	结束拖拽
ondragenter	拖拽元素进入拖放元素范围内触发
ondragleave	拖拽元素离开拖放元素范围触发
ondragover	拖拽元素完全进入元素范围内触发
ondragdrop	拖拽元素在拖放元素范围内放手的时候触发

注意：如果想要让drop事件生效，需要阻止 dragover事件的默认行为

<p></p>
<!-----分割线----->
p.ondrop = function() {
    console.log("把元素拖进来撒手");
};

案例：拖拽元素

分析思路：

/*
    案例 拖拽
        1. 什么时候触发效果
            1) 鼠标按下
            2) 鼠标抬起
            3) 鼠标移动
        2. 什么范围触发效果
            1) 鼠标按下     div
            2) 鼠标抬起     div
            3) 鼠标移动     document
        3. 什么效果
            1) 鼠标按下     保证div可以拖拽
            2) 鼠标抬起     保证div不可以拖拽
            3) 鼠标移动     设置div top left   
            获取 移动的时候 光标距离窗口左上角的位置  -  初始的时候 光标距离元素左上角的位置
  */

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
</style>
<body>
    <div></div>
</body>
<script>
    // 0 获取元素
    var div = document.querySelector("div");
    // 0 准备变量
    var flag = false; // 默认元素不可以拖拽
    var startX = 0;
    var startY = 0;
    // 1. 鼠标按下
    div.onmousedown = function (e) {
        // 开启开关
        flag = true;
        // 记录刚开始的时候鼠标距离元素左上角的位置
        startX = e.offsetX;
        startY = e.offsetY;
    };
    // 2. 鼠标抬起
    div.onmouseup = function () {
        // 开关关闭
        flag = false;
    };
    // 3. 鼠标移动
    document.onmousemove = function (e) {
        // 如果开关关闭 不能拖拽
        if (!flag) {
            // 如果代码进入这里，表示开关关闭，也就是鼠标抬起，不能拖拽
            return;
        }
        // 表示可以拖拽
        console.log("可以拖拽");
        // 设置 div 的top left
        // 获取 移动的时候 光标距离窗口左上角的位置  -  初始的时候 光标距离元素左上角的位置
        var x = e.clientX - startX;
        var y = e.clientY - startY;
        div.style.top = y + "px";
        div.style.left = x + "px";
    };
</script>