事件2 有源码可以随意进行练习哈太棒了一起加油一起成长

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106598488

1、鼠标事件
click mousedown mousemove mouseup contextmenu mouseover mouseout mouseenter mouseleave

<body>
	   //  实现的功能是鼠标移动过程中记录当前位置的坐标    把这个坐标放到小方块上去  小方块就可跟着移动了 
	   
	  <div style="width:100px;height:100px;background-color:red; position:absolute; left:0;top:0"></div> 
 	<script type="text/javascript">
 		var div = document.getElementsByTagName('div')[0];
		
		document.onmousemove = function (e) {
			var event = e || window.event;
		 console.log(e.pageX + "," + e.pageY);
		} 		
 		

 	</script>
	
</body>

在这里插入图片描述

那鼠标初始位置怎么处理？我需要在实现的内容是鼠标初始比如说在左上角移动过程也在左上角但是现在默认都会在左上角这样是不行的还有一个问题 div.onmousemove 和 div.onmouseup 需要改成 document 这样表示的是在整个文档上的运动不会卡顿

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>

</head>
<body>
	     
	  <div style="width:100px;height:100px;background-color:red; position:absolute; left:0;top:0"></div> 
 	<script type="text/javascript">
 		var div = document.getElementsByTagName('div')[0];
		var disX,
			disY;
		div.onmousedown = function (e) {
			disX = e.pageX - parseInt(div.style.left);
			disY = e.pageY - parseInt(div.style.top);
			document.onmousemove = function (e) {
				var event = e || window.event ;
				div.style.left = e.pageX - disX + "px";
				div.style.top  = e.pageY - disY + "px";
			}

			document.onmouseup = function () {
				div.onmousemove = null;
			}
		}		
 		

 	</script>
	
</body>
</html>

IE专用的一种事件捕获方式面试能说出来就行
div.setCapture（将页面的所有操作都算在div上）和 div.releaseCapture（释放这种操作）

click 敲击鼠标事件 mousedown mouseup
contextmenu 右键产生菜单事件
mousemove 鼠标移动事件
onmouseover/ onmouseenter 当鼠标移入的时候发生作用 onmouseout /onmouseleave 当鼠标离开的时候发生作用 两组的效果是一样的

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">		
	</style>
</head>
<body>	     
	  <div style="width:100px;height:100px;background-color:red"></div> 
 	<script type="text/javascript">
 		var div = document.getElementsByTagName('div')[0];
 		div.onmouseover = function () {
 			div.style.background = 'yellow';
 		}
 		div.onmouseout = function () {
 			div.style.background = 'green';
 		}
 	</script>	
</body>
</html>

在这里插入图片描述

用botton 区分鼠标的按键左右键 onmousedown onmouseup 0 (鼠标左键) / 1 (鼠标滚轮) / 2 (鼠标右键)

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>

</head>
<body>
	     
	  <div style="width:100px;height:100px;background-color:red"></div> 
 	<script type="text/javascript">
 		document.onmousedown  = function (e)  {
 			if(e.button == 2){
 				console.log('right');
 			}else if(e.button == 0){
 				console.log('left');
 			}
 		}
 		
 	</script>
	
</body>
</html>

在这里插入图片描述
DOM3 标准规定：click事件只能监听左键只能通过mousedown mouseup 来判断鼠标键
如何解决mousedown 和 click 的冲突

实现一个功能为点击div小方块之后出现click 但是按住div 不触发

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>

</head>
<body>
	     
	  <div style="width:100px;height:100px;background-color:red"></div> 
 	<script type="text/javascript">
 		var firstTime = 0;
 		var lastTime = 0;   // 设置时间戳
 		var key = false;     //设置一个开关
 		document.onmousedown = function () {
 			firstTime = new Date().getTime();

 		}
 		
 		document.onmouseup = function () {
 			lastTime = new Date().getTime();
 			if(lastTime - firstTime < 300){
 				key = true;
 			}
 		}

 		document.onclick = function () {
 			if(key){
 				console.log('click');
 				key = false;
 			}
 		}
 	</script>
	
</body>
</html>

解释一下
在这里插入图片描述

**2.键盘事件
keydown keyup keypress
keydown > keypress > keyup

 	<script type="text/javascript">
 		document.onkeypress = function () {
 			console.log('keypress');
 		}
 		document.onkeydown = function () {
 			console.log('onkeydown');
 		}
 		document.onkeyup = function () {
 			console.log('onkeyup');
 		}
 	</script>

实现的是对键盘的操作区别按住键盘就是 onkeydown 松开就是onkeyup

keydown 和 keypress的区别
keydown 可以响应任意键盘按键 keypress只能响应字符类键盘按键（shift 上下左右都没有）
keypress返回ASC码可以转换成相应的字符**
witch 监测的是键盘的108个按键

3.文本类操作事件
input ( 但凡里面的文本有变化就会触发这个事件）

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		input{
			border:1px solid #01f;
		}
	</style>

</head>
<body>
	     
	  <input type="text" >
 	<script type="text/javascript">
 		 var input = document.getElementsByTagName('input')[0];
 		 input.oninput = function (e) {
 		 	console.log(this.value);
 		 }
 	</script>
	
</body>
</html>

在这里插入图片描述
focus（聚焦进行改变内容失去焦点触发这个事件如果未对内容进行改变不触发事件）

blur
change

实现新浪搜索框的功能应该怎么实现呢
输入内容的时候搜索框里面的字变成黑色鼠标点击外面的时候如果搜索框为空的话就出现请输入关键字
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		input{
			border:1px solid #01f;
		}
	</style>

</head>
<body>
	     
	  <input type="text"  value="请输入用户名" style= "color:#999"  
	  onfocus="if(this.value == '请输入用户名')
	  {this.value = '';this.style.color = '#424242'}" 
	  onblur="if(this.value == '')
	  {this.value = '请输入用户名'; this.style.color = '#999'}">
 	<script type="text/javascript">
 		
 	</script>
	
</body>
</html>

PS：实现的结果是很舒服的相当的炫酷和好玩前端就是这么的牛皮和舒服
学前端赚大钱！

事件分类
窗体操作类（window上的事件）

scroll （滚动条滚动的时候触发 window上触发） load window.onload 不要去使用速度太慢

html 和 css 并行解析生成 domTree 和 cssTree
渲染树 renderTree
代码的解析先解析完 img 同时给个线程进行下载
文档先挂上节点然后JS开始执行
执行过程中可以下载和加载
练习 fixed定位 js 兼容版