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

这篇博客介绍了JavaScript中的事件处理,包括事件委派、事件绑定、事件传播等概念,详细讲解了如何实现元素的拖拽功能,并探讨了在不同浏览器中处理事件的差异。内容涵盖事件的冒泡、捕获阶段以及拖拽过程中的细节处理,如阻止默认行为和处理滚轮事件。此外,还展示了如何使用addEventListener和attachEvent来兼容不同浏览器的事件处理。
摘要由CSDN通过智能技术生成

学习地址:

  1. 谷粒学院——尚硅谷
  2. 哔哩哔哩网站——尚硅谷最新版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 属性

事件的委派——案例

我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素

事件的委派:指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。

<!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

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

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

addEventListener():通过这个方法也可以为元素绑定响应函数。
参数:

  1. 事件的字符串,click不要on。
  2. 回调函数,当事件触发时 该函数会被调用。
  3. 是否在捕获阶段触发事件,需要一个布尔值,一般都传false。

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行,这个方法不支持IE8及以下的浏览器

attachEvent():绑定事件【IE8】

attachEvent():在IE8中可以使用attachEvent()来绑定事件
参数:

  1. 事件的字符串,onclick要on。
  2. 回调函数。

这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反。

  

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

addEventListener()中的this,是绑定事件的对象;attachEvent()中的this,是window。需要统一两个方法this。

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

<!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及以下的浏览器中没有捕获阶段。

<!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。

  

<!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元素  
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
				box1.onmousedown = function(event) {
					event = event || window.event;
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX;
						var top = event.clientY;
						//修改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;
					};
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

P119 119.尚硅谷_JS基础_拖拽(二) 09:42

<!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元素  
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
				box1.onmousedown = function(event) {
					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;
					};
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

P120 120.尚硅谷_JS基础_拖拽(三) 24:27

测试IE8

<!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 代码

  

<!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 代码——拖拽图片

<!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():鼠标滚轮滚动的事件,会在滚轮滚动时触发

  

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

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

wheelDelta 这个值,我们不看大小、只看正负。

处理“滚动条”

滚轮事件-代码

  

<!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)

鼠标 / 键盘 属性

IE 属性

键盘事件

onkeydown

  • 按键被按下。
  • 对于onkeydown来说:如果一直按着某个按键不松手,则事件会一直触发。
  • 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快。这种设计是为了防止误操作的发生。

onkeyup

  • 按键被松开。

键盘事件,一般都会绑定给一些可以获取到焦点的对象或者是document。

通过keyCode来获取按键的编码

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

使文本框中不能输入数字

<!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”键   会加速。

<!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>

理论上,明天能看完~   冲冲冲~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

upward337

谢谢老板~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值