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

最新推荐文章于 2024-04-04 12:30:56 发布

繁星学编程

最新推荐文章于 2024-04-04 12:30:56 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45867247/article/details/128734414

版权

JavaScript 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript中常见的事件，包括鼠标事件如onclick、onmouseover，键盘事件如onkeydown、onkeyup，表单事件如onfocus、onsubmit，以及触摸和拖拽事件。通过实例解析了如何监听和响应这些事件，帮助读者更好地理解和应用JavaScript事件。

摘要由CSDN通过智能技术生成

💻【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>

效果图：

请添加图片描述

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】常见的事件(鼠标、键盘、表单等)

/ 获取移动的时候光标距离窗口左上角的位置 - 初始的时候光标距离元素左上角的位置。// 如果代码进入这里，表示开关关闭，也就是鼠标抬起，不能拖拽。// 记录刚开始的时候鼠标距离元素左上角的位置。// 设置 div 的top left。事件按下的内容必须和出现的内容一致。✍评论：您的建议是我改进的良药！// 如果开关关闭不能拖拽。// 默认元素不可以拖拽。// 1. 鼠标按下。// 2. 鼠标抬起。// 3. 鼠标移动。
复制链接

扫一扫