暑假学前端之JS篇

最新推荐文章于 2024-11-14 15:33:48 发布

_语义错误

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量154

点赞数 1

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

本文链接：https://blog.csdn.net/m0_66451927/article/details/125519484

版权

本文是作者暑假学习JavaScript的笔记，主要涵盖了拖拽、滚轮和键盘事件。在拖拽部分，讲解了如何处理IE8+、Edge和Chrome的兼容性问题，介绍了onmousedown、onmousemove和onmouseup事件。滚轮事件中，提到了Firefox的兼容处理，并使用preventDefault()避免页面滚动。键盘事件部分，讨论了onkeydown和onkeyup事件，以及如何通过keyCode和altkey、ctrlkey、shiftkey判断按键状态。最后给出了一个小练习，让读者实践利用方向键移动div。

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

前言：

兄弟门，兄弟门，暑假到了，是时候稿起来了。之前寒假的时候更新过几篇文章，然后就开学了，老小学三年级了，在22年第二学期断断续续学了一些，这次也是就挺突然的来更新，主要内容是JS，JS我是看着视频学的，看了一半，那就从一半开始更把，文章会放在一个系列里，如果后面有点责任心了就把文章补全，不过前面都是比较基础的，意义不是很大。这次的写作风格和以往的不太一样哈，我还是想着先随意写写，能坚持下去比较重要，以后每天我都会把学到的知识在博客里更新一下，算是个笔记也是“水”一篇博客，如果能帮到大家就最好不过了啦~~✧٩(ˊωˋ*)و✧

首先，普天同庆~~

IE，IE，IE退役了！！！

请看链接：https://baijiahao.baidu.com/s?id=1732999984148961007&wfr=spider&for=pc

也就是说：视频里面部分包含IE兼容的部分不会写出来

好了，废话不多说，开始正文，从视频的第118集开始

一、脱拽

二、滚轮

三、键盘事件

一、脱拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽</title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color:skyblue;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script>
			window.onload = function(){
				/* 
					拖拽box1元素
						-拖拽流程
							1.当鼠标在被拖拽元素上按下时，开始拖拽
							2.当鼠标移动时拖拽元素跟随鼠标移动
							3.当鼠标松开时，被拖拽元素固定在当前位置
					
				 */
				// 获取box1
				var box1 = document.getElementById("box1");
				// 为box1绑定一个鼠标按下事件
				// 1.当鼠标在被拖拽元素上按下时，开始拖拽
				box1.onmousedown = function(){
				// 2.当鼠标移动时拖拽元素跟随鼠标移动
					// 为document绑定一个onmousemove事件
					document.onmousemove = function(evevt){				
					event = event||window.event;
					// 3.当鼠标松开时，被拖拽元素固定在当前位置
					// 获取鼠标坐标
					var left = event.clientX;
					var top = event.clientY;
					
					// 修改box1的位置
					box1.style.left = left+"px";
					box1.style.top = top+"px";
					
					};
					// 3.当鼠标松开时，被拖拽元素固定在当前位置
					// 为元素绑定一个鼠标松开事件,注意要给document绑定，这样才能防止层级覆盖鼠标不在box1
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
						// 取消document.onmousemove事件
						document.onmousemove = null;
						
						// 取消document的onmousemove事件
						document.onmouseup = null;
						
						alert("鼠标松开了");