JavaScript 基础【事件对象】

鼠标移动事件
- 鼠标移动事件练习
事件的冒泡（Bubble）
- 冒泡的应用练习
事件的绑定
事件的传播
事件练习

鼠标移动事件

当鼠标在 areDiv 中移动时，在 showMsg 中来显示鼠标的坐标

获取两个 div

				var areDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");

onmousemove
该事件将会在鼠标在元素中移动时被触发

事件对象：
当事件的响应函数被触发时，浏览器每次都会将一个时间对象作为实参传递进响应函数，在时间对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，鼠标滚轮的滚动方向。。。

clientX：可以获取鼠标指针的水平坐标
clientY：可以获取鼠标指针的垂直坐标

在 IE8 中，响应函数被触发时，浏览器不会传递事件，在 IE8 及以下的浏览器中，是将事件对象作为 window 对象的属性保存的
将 var x = event.clientX;
改为 var x = window.event.clientX;

event = event || window.event;
用于解决浏览器事件兼容问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#areaDiv {
      
      
				border: 1px solid black;
				width: 300px;
				height: 50px;
				margin-bottom: 10px;
			}
	
			#showMsg {
      
      
				border: 1px solid black;
				width: 300px;
				height: 20px;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
      
      
				
				var areDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				
				areDiv.onmousemove = function(){
      
      
					 
					 var x = event.clientX;
					 var y = event.clientY;
					 
					 showMsg.innerHTML = "x = " + x + ", y = " + y;
					 
				}
				
			}
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>

在这里插入图片描述

鼠标移动事件练习

使红色的 div 随着鼠标移动

获取 box1

				var box1 = document.getElementById(box1);

绑定鼠标移动事件

				document.onmousemove = function(event){
    
    
				}

解决兼容问题

					event = event || window.event;

获取到鼠标的坐标

					var left = event.clientX;
					var top = event.clientY;

获取滚动条滚动的距离
chrome 认为浏览器的滚动条是 body 的，可以通过 body.scrolTop 来获取
火狐等浏览器认为浏览器的滚动条是 html 的

					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

设置 div 的偏移量

					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
      
      
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
      
      
				
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
      
      
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
					
					
					//获取到鼠标的坐标
					/*
					 * clientX和clientY
					 * 	用于获取鼠标在当前的可见窗口的坐标
					 * div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

在这里插入图片描述

事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

			window.onload = function(){
    
    
				
				var s1 = document.getElementById("s1");
				s1.onclick = function(){
    
    
					alert("span");
				}
				
				var box1 = document.getElementById("box1");
				box1.onclick = function(){
    
    
					alert("box1");
				}
				
				document.body.onclick = function(){
    
    
					alert(body); 
				}
				
			}

	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
	</body>

当触发第一个 span 事件后，会继续触发其父亲事件以及祖先事件，直到全都的事件都被触发
在这里插入图片描述

如果第一次触发的是 div 的事件，那么就不会触发 span 事件，只会触发 div 的父亲元素的事件 body

在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象取消冒泡

取消冒泡
可以将事件对象 cancelBubble 设置为 true，即可取消冒泡

event.cancelBubble = true

冒泡的应用练习

<!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.innerHTML = "<a href='javascript:;'>新建的超链接</a>"
					u1.appendChild(li);
				}
				
				var allA = document.getElementsByTagName("a")
				
				for(var i = 0; i < allA.length; i ++ ){
      
      
					allA[i].onclick = function(){
      
      
						alert("单机响应函数");
					}
				}
				
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1">
			<li><a href="javascript:;">超链接一</a></li>
			<li><a href="javascript:;">超链接二</a></li>
			<li><a href="javascript:;">超链接三</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述

事件的绑定

点击按钮后弹出一个内容

这样绑定响应函数，后面的响应函数会直接将前面的响应函数覆盖掉
也就是说：对象.事件的形式绑定函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后面会覆盖掉前边的

		window.onload = function(){
    
    
		
			//获取事件对象
			var btn01 = document.getElementById("btn01");
			
			//绑定一个单击响应函数
			btn01.onclick = function(){
    
    
				alert(1);
			}
			
			//绑定第二个单击响应函数
			btn01.onclick = function(){
    
    
				alert(2);
			}
			
		};

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

事件的字符串

回调函数，当事件触发时该函数会被调用

是否在捕获阶段触发事件，需要一个布尔值（一般都传false）

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

		window.onload = function(){
    
    
		
			//获取事件对象
			var btn01 = document.getElementById("btn01");
			
			//绑定一个单击响应函数
			btn01.addEventListener("click", function(){
    
    
				alert(1);
			},false);
			
			//绑定第二个单击响应函数	
			btn01.addEventListener("click", function(){
    
    
				alert(2);
			},false);
			
		};

事件的传播

传播:

捕获阶段：
在捕获阶段从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
目标阶段：
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段：
事件从目标元素向他的祖先元素传递，一次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将 addEventListener() 的第三个参数设置为 true 一般情况下我们不会希望在捕获阶段出发时间，所以这个参数我们一般都设置为 false

事件练习

鼠标拖拽

当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时，被拖拽元素固定在当前位置 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;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
      
      
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				box1.onmousedown = function(event){
      
      
					
					//鼠标和div的偏移量
					event = event || window.event;
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					document.onmousemove = function(event){
      
      
						
						event = event || window.event;
						
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						box1.style.left = left + "px";
						box1.style.top = top + "px";
						
					};
					
					document.onmouseup = function(){
      
      
						
						//取消document的onmousemove事件
						document.onmousemove = null;
						
						//取消onmousemove事件
						document.onmouseup = null;
						
					}
					
				};
				
			}
			
		</script>
	</head>
	<body>
		<div id="box1">
			
		</div>
	</body>
</html>

滚轮事件

当滚轮向下滚动时，box1 变长
当滚轮向上滚动时，box1 变短

<!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(){
      
      
				
				var box1 = document.getElementById("box1");
				
				box1.onmousewheel = function(event){
      
      
					
					event = event || window.event;
					
					//event.wheelData可以获取鼠标滚轮滚动的方向
					//向上滚120，向下滚-120
					//wheelDate不看大小，只看正负，正值向上，负值向下
					if(event.wheelData > 0){
      
      
						//向上滚
						box1.style.height = box1.clientHeight - 10 + "px";
					} else {
      
      
						//向下滚
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
				}
				
			};
			
		</script>
	</head>
	<body>
		<div id="box1">
			
		</div>
	</body>
</html>

键盘事件

onkeydown：按键按下，对于该方法来说，如果按着某个按键不松手，则事件会一直被触发，第一次和第二次触发之间的间隔时间会长一点，之后的间隔就会很短，这是为了防止误操作
onkeyup：按键松开

keyCode：获取按键的编码，通过该方法可以判断哪个按键被按下
altKey：判断alt键是否被按下，被按下返回true，反之返回false
ctrlKey：判断ctrl键是否被按下，被按下返回true，反之返回false
shiftKey：判断shift键是否被按下，被按下返回true，反之返回false

键盘事件一般都会绑定给一些可以获取焦点的事件，或者document事件

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

<!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">
			
			window.onload = function(){
      
      
				
				document.onkeydown = function(event){
      
      
					
					event = event || window.event;
					
					switch(event.keyCode){
      
      
						case 37:
							box1.style.left = box1.offsetLeft - 10 + "px";
							break;
						case 39:
							box1.style.left = box1.offsetLeft + 10 + "px";
							break;
						case 38:
							box1.style.top = box1.offsetTop - 10 + "px";
							break;
						case 40:
							box1.style.top = box1.offsetTop + 10 + "px";
							break;
					}
					
				};
				
			}
			
		</script>
	</head>
	<body>
		<div id="box1">
			
		</div>
	</body>
</html>

JavaScript 基础 【事件对象】

JavaScript 基础 【事件对象】

鼠标移动事件

鼠标移动事件练习

事件的冒泡（Bubble）

冒泡的应用练习

事件的绑定

事件的传播

事件练习

鼠标拖拽

滚轮事件

键盘事件

猜你喜欢

JavaScript 基础【事件对象】

JavaScript 基础【事件对象】