事件

最新推荐文章于 2022-01-29 16:09:10 发布

月光派件中。

最新推荐文章于 2022-01-29 16:09:10 发布

阅读量170

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108910345

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

什么是事件？
人与机的交互就是事件。

事件类型

ui事件
onscroll 滚动条事件
onload 页面加载触发
unload 页面关闭触发
onselect 选中文本时触发
onresize 改变浏览器窗口触发
onabort 图像加载被中断触发
error 错误信息时触发
onchange 当改变一个元素的值且失去焦点时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="height:3000px">
		<input type="text" name="" id="" value="哈哈哈哈" />
		
		
	</body>
	<script type="text/javascript">
//		window.οnscrοll=function(){
//			var h=document.documentElement.scrollTop||document.body.scrollTop;
//			console.log(h)
//		}

		var oinput=document.querySelector('input');
		oinput.onselect=function(){
			console.log(12312)
		}
	</script>
</html>

焦点事件
onfocus 获得焦点事件（没有冒泡，浏览器都支持）
onblur 失去焦点事件（没有冒泡，浏览器都支持）
onfocusin 获得焦点事件（有冒泡，IE支持）
onfocusout 失去焦点事件（有冒泡，IE支持）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" name="" id="" value="" />
		</div>
	</body>
	<script type="text/javascript">
		var oinp=document.getElementsByTagName('input')[0];
		var obox=document.getElementsByTagName('div')[0];
//		oinp.οnblur=function(){
//			console.log(2312312)
//		}
//		oinp.οnfοcus=function(){
//			console.log('kkkkkkk')
//		}
		
//		obox.οnfοcusin=function(){
//			alert(123123)
//		}
		obox.onfocusout=function(){
			console.log('坎坎坷坷')
		}
	</script>
</html>

鼠标事件
onclick 当用户单击对象时
ondblclick 当用户双击对象时
onmouseout 移出事件
onmouseover 移入事件
onmousemove 移入元素的内部不断的移动时触发
onmousedown 在用户按下了任意鼠标按钮时触发
onmouseup 在用户释放鼠标按钮时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>点击</button>
	</body>
	<script type="text/javascript">
		var obtn=document.getElementsByTagName('button')[0];
//		obtn.οnclick=function(){
//			alert()
//		}

//		obtn.οndblclick=function(){
//			alert()
//		}

//		obtn.οnmοuseοut=function(){
//			alert()
//		}

//		obtn.οnmοuseοver=function(){
//			alert()
//		}

//		obtn.οnmοusemοve=function(){
//			alert()
//		}

//		obtn.οnmοusedοwn=function(){
//			alert()
//		}

//		obtn.οnmοuseup=function(){
//			alert()
//		}
	</script>
</html>

键盘事件
onKeydown 当用户按下键盘上的任意键时触发。
onKeypress 当用户按下键盘上的字符键时触发。
onKeyup 当用户释放键盘上的键时触发。
keyCode 返回键盘键对应的编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		var obox=document.getElementsByTagName('div')[0];
//		window.οnkeydοwn=function(evt){
//			var e=event||window.event;
//			obox.innerHTML=e.keyCode;//keyCode 键盘编码
//		}

//		window.οnkeypress=function(evt){
//			var e=event||window.event;
//			obox.innerHTML=e.keyCode;//keyCode 键盘编码
//		}

		window.onkeyup=function(evt){
			var e=event||window.event;
			obox.innerHTML=e.keyCode;//keyCode 键盘编码
		}
	</script>
</html>

获取鼠标在可视窗口的位置

clientX 鼠标在x轴的位置
clientY 鼠标在y轴的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				position: fixed;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<p style="margin: 50px;"></p>
		<p style="margin: 150px;"></p>
		<p></p>
	</body>
	<script type="text/javascript">
	var op1=document.getElementsByTagName('p')[0];
	var op2=document.getElementsByTagName('p')[1];
	var op3=document.getElementsByTagName('p')[2];
		window.onmousemove=function(e){
			var e=e||window.event;
			op1.innerHTML='我是可视区域'+e.clientX+','+e.clientY;
			op2.innerHTML='我是页面区域'+e.pageX+','+e.pageY;
			op3.innerHTML='我是屏幕区域'+e.screenX+','+e.screenY;
		}
	</script>
</html>

获取鼠标在页面的坐标位置

pageX 鼠标在页面x轴的位置
pageY 鼠标在页面y轴的位置

获取鼠标在屏幕坐标位置

screenX 鼠标在屏幕的x轴的位置
screenY 鼠标在屏幕的y轴的位置

获取到鼠标在当前div(元素)上的坐标位置

offsetY
offsetX 火狐浏览器不兼容
layerX 火狐浏览器兼容
layerY

获取可视窗口的宽高/获取屏幕窗口的宽高

可视：clientWidth/clientHeight
屏幕：screenWidth/screenHeight

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p></p>
	</body>
	<script type="text/javascript">
		var obox=document.getElementsByTagName('div')[0];
		var op=document.getElementsByTagName('p')[0];
		obox.onmousemove=function(e){
			var e=e||window.event;
			op.innerHTML=e.offsetX+','+e.offsetY;
		}
		
		
		
	</script>
</html>