JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】

迷南。 2023-01-09 15:58 199阅读 0赞

> **学习地址：**
> 
> 1.  [谷粒学院——尚硅谷][Link 1]
> 2.  [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)][JavaScript_140_JS]
> 
> --------------------
> 
> [JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】][JavaScript_JavaScript_140_JS]

***目   录***

P114 114.尚硅谷\_JS基础\_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

P115 115.尚硅谷\_JS基础\_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

attachEvent()：绑定事件【IE8】

定义一个函数，用来为指定元素绑定响应函数

P116 116.尚硅谷\_JS基础\_完成bind函数 08:58

P117 117.尚硅谷\_JS基础\_事件的传播 14:46

P118 118.尚硅谷\_JS基础\_拖拽（一） 19:15

P119 119.尚硅谷\_JS基础\_拖拽（二） 09:42

P120 120.尚硅谷\_JS基础\_拖拽（三） 24:27

测试IE8

拖拽2 代码

拖拽3 代码——拖拽图片

P121 121.尚硅谷\_JS基础\_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

处理“滚动条”

滚轮事件-代码

P122 122.尚硅谷\_JS基础\_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘 属性

IE 属性

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

P123 123.尚硅谷\_JS基础\_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

--------------------

# P114 114.尚硅谷\_JS基础\_事件的委派 19:49 #

## IE 属性 / 标准 Event 属性 ##

> ![2021012212433391.png][]
> 
> ![20210122124401706.png][]

## 事件的委派——案例 ##

> 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素
> 
> **事件的委派**：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
> 
> 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    
    				var u1 = document.getElementById("u1");
    				//点击按钮以后添加超链接
    				var btn01 = document.getElementById("btn01");
    				btn01.onclick = function() {
    					var li = document.createElement("li"); // 创建一个li
    					li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
    					u1.appendChild(li); // 将li添加到ul中
    				};
    
    				/*
    				 * 为每一个超链接都绑定一个单击响应函数
    				 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
    				 * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
    				 */
    				var allA = document.getElementsByTagName("a"); // 获取所有的a
    				/* for (var i = 0; i < allA.length; i++) { // 遍历
    					allA[i].onclick = function() {
    						alert("我是a的单击响应函数！！！");
    					};
    				} */
    
    				/*
    				 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
    				 * 我们可以尝试将其绑定给元素的共同的祖先元素
    				 * 
    				 * 事件的委派
    				 * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
    				 * 		从而通过祖先元素的响应函数来处理事件。
    				 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
    				 */
    				u1.onclick = function(event) { // 为ul绑定一个单击响应函数
    					event = event || window.event;
    					/*
    					 * target
    					 * 	- event中的target表示的触发事件的对象
    					 */
    					// alert(event.target);
    					//如果触发事件的对象是我们期望的元素，则执行否则不执行
    					if (event.target.className == "link") {
    						alert("我是ul的单击响应函数");
    					}
    				};
    
    			};
    		</script>
    	</head>
    	<body>
    		<button id="btn01">添加超链接</button>
    		<ul id="u1" style="background-color: #bfa;">
    			<li>
    				<p>我是p元素</p>
    			</li>
    			<li><a href="javascript:;" class="link">超链接一</a></li>
    			<li><a href="javascript:;" class="link">超链接二</a></li>
    			<li><a href="javascript:;" class="link">超链接三</a></li>
    		</ul>
    	</body>
    </html>

# P115 115.尚硅谷\_JS基础\_事件的绑定 18:06 #

## “对象.事件 = 函数”的形式绑定响应函数，不能绑定多个 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

## addEventListener()：为元素绑定响应函数 ##

> **addEventListener()**：通过这个方法也可以为元素绑定响应函数。  
> 参数：
> 
> 1.  事件的字符串，click不要on。
> 2.  回调函数，当事件触发时 该函数会被调用。
> 3.  是否在捕获阶段触发事件，需要一个布尔值，一般都传false。
> 
> 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。
> 
> ![20210122131313691.png][]

## attachEvent()：绑定事件【IE8】 ##

> **attachEvent()**：在IE8中可以使用attachEvent()来绑定事件  
> 参数：
> 
> 1.  事件的字符串，onclick要on。
> 2.  回调函数。
> 
> 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

## 定义一个函数，用来为指定元素绑定响应函数 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]
> 
> addEventListener()中的this，是绑定事件的对象；attachEvent()中的this，是window。需要统一两个方法this。

# P116 116.尚硅谷\_JS基础\_完成bind函数 08:58 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    				// 点击按钮以后弹出一个内容
    				var btn01 = document.getElementById("btn01"); // 获取按钮对象
    
    				/*
    				 * 使用 对象.事件 = 函数 的形式绑定响应函数，
    				 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
    				 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
    				 */
    				/* btn01.onclick = function() { // 为btn01绑定第1个单击响应函数
    					alert(1);
    				};
    				btn01.onclick = function() { // 为btn01绑定第2个响应函数
    					alert(2);
    				}; */
    
    				/*
    				 * addEventListener()
    				 * 	- 通过这个方法也可以为元素绑定响应函数
    				 *  - 参数：
    				 * 		1.事件的字符串，click不要on
    				 * 		2.回调函数，当事件触发时 该函数会被调用
    				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
    				 * 
    				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
    				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
    				 * 
    				 * 这个方法不支持IE8及以下的浏览器
    				 */
    				/* btn01.addEventListener("click", function() {
    					alert(1);
    				}, false);
    				btn01.addEventListener("click", function() {
    					alert(2);
    				}, false);
    				btn01.addEventListener("click", function() {
    					alert(3);
    				}, false); */
    
    				/*
    				 * attachEvent()
    				 * 	- 在IE8中可以使用attachEvent()来绑定事件
    				 *  - 参数：
    				 * 		1.事件的字符串，要on
    				 * 		2.回调函数
    				 * 
    				 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
    				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
    				 */
    				/* btn01.attachEvent("onclick", function() {
    					alert(1);
    				});
    				btn01.attachEvent("onclick", function() {
    					alert(2);
    				});
    				btn01.attachEvent("onclick", function() {
    					alert(3);
    				}); */
    
    				/* btn01.addEventListener("click", function() {
    					alert(this);
    				}, false);
    				btn01.attachEvent("onclick", function() {
    					alert(this);
    				}); */
    
    				bind(btn01, "click", function() {
    					alert(this);
    				});
    			};
    
    			//定义一个函数，用来为指定元素绑定响应函数
    			/*
    			 * addEventListener()中的this，是绑定事件的对象
    			 * attachEvent()中的this，是window
    			 *  需要统一两个方法this
    			 */
    			/*
    			 * 参数：
    			 * 	obj 要绑定事件的对象
    			 * 	eventStr 事件的字符串(不要on)
    			 *  callback 回调函数
    			 */
    			function bind(obj, eventStr, callback) {
    				if (obj.addEventListener) {
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr, callback, false);
    				} else {
    					/*
    					 * this是谁由调用方式决定
    					 * callback.call(obj)
    					 */
    					//IE8及以下
    					obj.attachEvent("on" + eventStr, function() {
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<button id="btn01">点我一下</button>
    	</body>
    </html>

# P117 117.尚硅谷\_JS基础\_事件的传播 14:46 #

> **事件的传播**
> 
>  *  关于事件的传播网景公司和微软公司有不同的理解
>  *  微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
>  *  网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
>  *  W3C综合了两个公司的方案，将事件传播分成了三个阶段：
> 
> 1.  捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
> 2.  目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
> 3.  冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
> 
>  *  如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，IE8及以下的浏览器中没有捕获阶段。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 300px;
    				height: 300px;
    				background-color: yellowgreen;
    			}
    			#box2 {
    				width: 200px;
    				height: 200px;
    				background-color: yellow;
    			}
    			#box3 {
    				width: 150px;
    				height: 150px;
    				background-color: skyblue;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				// 分别为三个div绑定单击响应函数
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2");
    				var box3 = document.getElementById("box3");
    
    				bind(box1, "click", function() {
    					alert("我是box1的响应函数")
    				});
    				bind(box2, "click", function() {
    					alert("我是box2的响应函数")
    				});
    				bind(box3, "click", function() {
    					alert("我是box3的响应函数")
    				});
    			};
    
    			function bind(obj, eventStr, callback) {
    				if (obj.addEventListener) {
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr, callback, true);
    				} else {
    					/*
    					 * this是谁由调用方式决定
    					 * callback.call(obj)
    					 */
    					//IE8及以下
    					obj.attachEvent("on" + eventStr, function() {
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box1">
    			<div id="box2">
    				<div id="box3"></div>
    			</div>
    		</div>
    	</body>
    </html>

# P118 118.尚硅谷\_JS基础\_拖拽（一） 19:15 #

> **拖拽的流程：**
> 
> 1.  当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
> 2.  当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
> 3.  当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]  ![20210122164501706.png][]

# P119 119.尚硅谷\_JS基础\_拖拽（二） 09:42 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

# P120 120.尚硅谷\_JS基础\_拖拽（三） 24:27 #

## 测试IE8 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    				//分别为两个按钮绑定单击响应函数
    				var btn01 = document.getElementById("btn01");
    				var btn02 = document.getElementById("btn02");
    				btn01.onclick = function() {
    					alert(1);
    				};
    				btn02.onclick = function() {
    					alert(2);
    				};
    				//设置btn01对鼠标按下相关的事件进行捕获
    				//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
    				btn01.setCapture();
    			};
    		</script>
    	</head>
    	<body>
    		<button id="btn01">按钮01</button>
    		<button id="btn02">按钮02</button>
    	</body>
    </html>

## 拖拽2 代码 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]  ![20210122173604175.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    
    			#box2 {
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				position: absolute;
    				left: 200px;
    				top: 200px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 拖拽box1元素
    				 *  - 拖拽的流程
    				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
    				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    				 */
    
    				//获取box1
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2");
    				//为box1绑定一个鼠标按下事件
    				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
    				box1.onmousedown = function(event) {
    					//设置box1捕获所有鼠标按下的事件
    					/*
    					 * setCapture()
    					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
    					 * 		而如果使用chrome调用，会报错
    					 */
    					/* if (box1.setCapture) {
    						box1.setCapture();
    					} */
    					box1.setCapture && box1.setCapture();
    					event = event || window.event;
    					//div的偏移量 鼠标.clentX - 元素.offsetLeft
    					//div的偏移量 鼠标.clentY - 元素.offsetTop
    					var ol = event.clientX - box1.offsetLeft;
    					var ot = event.clientY - box1.offsetTop;
    
    					//为document绑定一个onmousemove事件
    					document.onmousemove = function(event) {
    						event = event || window.event;
    						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    						//获取鼠标的坐标
    						var left = event.clientX - ol;
    						var top = event.clientY - ot;
    						//修改box1的位置
    						box1.style.left = left + "px";
    						box1.style.top = top + "px";
    					};
    
    					//为document绑定一个鼠标松开事件
    					document.onmouseup = function() {
    						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    						//取消document的onmousemove事件
    						document.onmousemove = null;
    						//取消document的onmouseup事件
    						document.onmouseup = null;
    						//当鼠标松开时，取消对事件的捕获
    						box1.releaseCapture && box1.releaseCapture();
    					};
    
    					/*
    					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
    					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
    					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
    					 * 
    					 * 但是这招对IE8不起作用
    					 */
    					return false;
    				};
    			};
    		</script>
    	</head>
    	<body>
    		我是一段文字
    		<div id="box1"></div>
    		<div id="box2"></div>
    	</body>
    </html>

## 拖拽3 代码——拖拽图片 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			#box2 {
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				position: absolute;
    				left: 200px;
    				top: 200px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    				 * 拖拽box1元素
    				 *  - 拖拽的流程
    				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
    				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    				 */
    
    				//获取box1
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2");
    				var img1 = document.getElementById("img1");
    
    				drag(box1); // 开启box1的拖拽
    				drag(box2); // 开启box2的拖拽
    				drag(img1);
    			};
    
    			/*
    			 * 提取一个专门用来设置拖拽的函数
    			 * 参数：开启拖拽的元素
    			 */
    			function drag(obj) {
    				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
    				obj.onmousedown = function(event) {
    					//设置box1捕获所有鼠标按下的事件
    					/*
    					 * setCapture()
    					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
    					 * 		而如果使用chrome调用，会报错
    					 */
    					/*if(box1.setCapture){
    						box1.setCapture();
    					}*/
    					obj.setCapture && obj.setCapture();
    					event = event || window.event;
    					//div的偏移量 鼠标.clentX - 元素.offsetLeft
    					//div的偏移量 鼠标.clentY - 元素.offsetTop
    					var ol = event.clientX - obj.offsetLeft;
    					var ot = event.clientY - obj.offsetTop;
    
    					//为document绑定一个onmousemove事件
    					document.onmousemove = function(event) {
    						event = event || window.event;
    						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    						//获取鼠标的坐标
    						var left = event.clientX - ol;
    						var top = event.clientY - ot;
    						//修改box1的位置
    						obj.style.left = left + "px";
    						obj.style.top = top + "px";
    					};
    
    					//为document绑定一个鼠标松开事件
    					document.onmouseup = function() {
    						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    						//取消document的onmousemove事件
    						document.onmousemove = null;
    						//取消document的onmouseup事件
    						document.onmouseup = null;
    						//当鼠标松开时，取消对事件的捕获
    						obj.releaseCapture && obj.releaseCapture();
    					};
    
    					/*
    					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
    					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
    					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
    					 * 
    					 * 但是这招对IE8不起作用
    					 */
    					return false;
    				};
    			}
    		</script>
    	</head>
    	<body>
    		我是一段文字！
    		<div id="box1"></div>
    		<div id="box2"></div>
    		<img src="img/an.jpg" id="img1" style="position: absolute;" />
    	</body>
    </html>

# P121 121.尚硅谷\_JS基础\_滚轮的事件 22:27 #

## onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]  ![20210122195812619.png][]
> 
> ![20210122195908489.png][]

## event.wheelDelta：获取鼠标滚轮滚动的方向 ##

### 在火狐中使用event.detail来获取滚动的方向 ###

> wheelDelta 这个值，我们不看大小、只看正负。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

## 处理“滚动条” ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]

## 滚轮事件-代码 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]  ![20210122200823709.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				//获取id为box1的div
    				var box1 = document.getElementById("box1");
    				//为box1绑定一个鼠标滚轮滚动的事件
    				/*
    				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
    				 * 	但是火狐不支持该属性
    				 * 
    				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
    				 * 	注意该事件需要通过addEventListener()函数来绑定
    				 */
    				box1.onmousewheel = function(event) {
    					event = event || window.event;
    					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
    					//向上滚 120   向下滚 -120
    					//wheelDelta这个值我们不看大小，只看正负
    					//alert(event.wheelDelta);
    
    					//wheelDelta这个属性火狐中不支持
    					//在火狐中使用event.detail来获取滚动的方向
    					//向上滚 -3  向下滚 3
    					//alert(event.detail);
    
    					/*
    					 * 当鼠标滚轮向下滚动时，box1变长
    					 * 	当滚轮向上滚动时，box1变短
    					 */
    					//判断鼠标滚轮滚动的方向
    					if (event.wheelDelta > 0 || event.detail < 0) {
    						//向上滚，box1变短
    						box1.style.height = box1.clientHeight - 10 + "px";
    					} else {
    						//向下滚，box1变长
    						box1.style.height = box1.clientHeight + 10 + "px";
    					}
    
    					/*
    					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
    					 * 需要使用event来取消默认行为event.preventDefault();
    					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
    					 */
    					event.preventDefault && event.preventDefault();
    					/*
    					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
    					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
    					 */
    					return false;
    				};
    				//为火狐绑定滚轮事件
    				bind(box1, "DOMMouseScroll", box1.onmousewheel);
    			};
    			function bind(obj, eventStr, callback) {
    				if (obj.addEventListener) {
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr, callback, false);
    				} else {
    					/*
    					 * this是谁由调用方式决定
    					 * callback.call(obj)
    					 */
    					//IE8及以下
    					obj.attachEvent("on" + eventStr, function() {
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<div id="box1"></div>
    	</body>
    </html>

# P122 122.尚硅谷\_JS基础\_键盘事件 24:02 #

## 事件句柄（Event Handlers） ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]

## 鼠标 / 键盘 属性 ##

> ![20210122202328218.png][]

## IE 属性 ##

> ![20210122202435358.png][]

> **键盘事件**
> 
> onkeydown
> 
>  *  按键被按下。
>  *  对于onkeydown来说：如果一直按着某个按键不松手，则事件会一直触发。
>  *  当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。
> 
> onkeyup
> 
>  *  按键被松开。
> 
> 键盘事件，一般都会绑定给一些可以获取到焦点的对象或者是document。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]

## 通过keyCode来获取按键的编码 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]
> 
> ![20210122203154647.png][]
> 
> ![20210122203707396.png][]

## 在onkeydown中取消默认行为：输入的内容，不会出现在文本框中 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21][]

### 使文本框中不能输入数字 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    				document.onkeydown = function(event) {
    					event = event || window.event;
    					/*
    					 * 可以通过keyCode来获取按键的编码
    					 * 	通过它可以判断哪个按键被按下
    					 * 除了keyCode，事件对象中还提供了几个属性
    					 * 	altKey
    					 * 	ctrlKey
    					 * 	shiftKey
    					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
    					 * 			如果按下则返回true，否则返回false
    					 */
    					//console.log(event.keyCode);
    
    					//判断一个y是否被按下
    					//判断y和ctrl是否同时被按下
    					if (event.keyCode === 89 && event.ctrlKey === 17) {
    						console.log("ctrl和y都被按下了");
    					}
    				};
    
    				/* document.onkeyup = function() {
    					console.log("按键松开了");
    				}; */
    
    				var input = document.getElementsByTagName("input")[0]; // 获取input
    				input.onkeydown = function(event) {
    					event = event || window.event;
    					//console.log(event.keyCode);
    					//数字 48 - 57
    					//使文本框中不能输入数字
    					if (event.keyCode >= 48 && event.keyCode <= 57) {
    						//在文本框中输入内容，属于onkeydown的默认行为
    						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
    						return false;
    					}
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<input type="text" />
    	</body>
    </html>

# P123 123.尚硅谷\_JS基础\_键盘移动div 08:59 #

## 使div可以根据不同的方向键向不同的方向移动 ##

> 按方向键的同时，按“Ctrl”键   会加速。
> 
> ![20210122204948535.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    		</style>
    		<script type="text/javascript">
    			//使div可以根据不同的方向键向不同的方向移动
    			/*
    			 * 按左键，div向左移
    			 * 按右键，div向右移...
    			 */
    			window.onload = function() {
    				//为document绑定一个按键按下的事件
    				document.onkeydown = function(event) {
    					event = event || window.event;
    					//定义一个变量，来表示移动的速度
    					var speed = 10;
    					//当用户按了ctrl以后，速度加快
    					if (event.ctrlKey) {
    						speed = 50;
    					}
    					/*
    					 * 37 左
    					 * 38 上
    					 * 39 右
    					 * 40 下
    					 */
    					switch (event.keyCode) {
    						case 37:
    							//alert("向左"); left值减小
    							box1.style.left = box1.offsetLeft - speed + "px";
    							break;
    						case 39:
    							//alert("向右");
    							box1.style.left = box1.offsetLeft + speed + "px";
    							break;
    						case 38:
    							//alert("向上");
    							box1.style.top = box1.offsetTop - speed + "px";
    							break;
    						case 40:
    							//alert("向下");
    							box1.style.top = box1.offsetTop + speed + "px";
    							break;
    					}
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<div id="box1"></div>
    	</body>
    </html>

> 理论上，明天能看完~   冲冲冲~

[Link 1]: http://www.gulixueyuan.com/my/course/58
[JavaScript_140_JS]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript_JavaScript_140_JS]: https://blog.csdn.net/weixin_44949135/article/details/108621932
[2021012212433391.png]: /images/20221119/2877f722c5434ed5bfe154f9eb5e9f88.png
[20210122124401706.png]: /images/20221119/4cc7163a0d444a0ba5230b74e71900b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221119/ba8120d1aa724d8682ab7c16050038e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210122130503550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122131313691.png]: https://img-blog.csdnimg.cn/20210122131313691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210122131444135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210122131814966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210122132310220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210122132410624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210122134220426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210122162724442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210122163131460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210122164452264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122164501706.png]: https://img-blog.csdnimg.cn/20210122164501706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210122172033337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2021012217421275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210122173620397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122173604175.png]: https://img-blog.csdnimg.cn/20210122173604175.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210122174334513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2021012219573627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122195812619.png]: https://img-blog.csdnimg.cn/20210122195812619.png
[20210122195908489.png]: https://img-blog.csdnimg.cn/20210122195908489.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210122200527379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210122201138297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210122200841205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122200823709.png]: https://img-blog.csdnimg.cn/20210122200823709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210122201339714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122202328218.png]: https://img-blog.csdnimg.cn/20210122202328218.png
[20210122202435358.png]: https://img-blog.csdnimg.cn/20210122202435358.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20210122201955407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20210122203025446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122203154647.png]: https://img-blog.csdnimg.cn/20210122203154647.png
[20210122203707396.png]: https://img-blog.csdnimg.cn/20210122203707396.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20210122204041310.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20210122204345803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210122204948535.png]: https://img-blog.csdnimg.cn/20210122204948535.png