💻【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) 鼠标按下 div2) 鼠标抬起 div3) 鼠标移动 document3. 什么效果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>
效果图：
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
