JS[Dom]键盘鼠标事件

最新推荐文章于 2024-01-29 15:40:11 发布

☀️오동동

最新推荐文章于 2024-01-29 15:40:11 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/TongWu1/article/details/102891514

版权

常用鼠标事件
onclick,ommouseover,onfocus,onmouseout,onblur,onmousemove,onmouseup,onmousedown
鼠标事件对象
event（MouseEvent和KeyboardEvent）
e.clientX,e.clientY:鼠标相对于浏览器可视区域位置
e.pageX,e.pageY:鼠标相对于文档页面位置（IE9以上支持）
e.screenX,e.screentY:鼠标相对于屏幕位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小天使移动跟随鼠标</title>
	 <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
	<img src="images/angel.gif" alt="">
	<script>
		var angel = document.querySelector('img');
		document.addEventListener('mousemove',function(e) {
			var x = e.pageX;
			var y = e.pageY;
			angel.style.top = y - 40 + 'px';
			angel.style.left = x - 48 + 'px';
		});
	</script>
</body>
</html>

常用键盘事件
onkeyup,onkeydown,onkeypress
区别：onkeyup是松开时触发，onkeydown按下时触发，他们两个返回的ASCII码不区分字母的大小写。onkeypress与onkeydown都是按下时触发，onkeydown可以识别功能键，如ctrl、Enter、左右箭头等，onkeypress不可以识别功能键但是区分字母的大小写，返回不同的ASCII码。
执行顺序：keydown–>keypress–>keyup
键盘事件对象
keyCode,返回按键的ASCII码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿京东搜索框，按下s键，自动聚焦到搜索栏</title>
</head>
<body>
	<input type="text">
	<script>
		var search = document.querySelector('input');
		document.addEventListener('keyup',function(e) {
			// console.log(e.keyCode);    s的ASCII是83
			if(e.keyCode == 83) {
				search.focus();       //注意这里没有on，不是onfocus
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>仿京东快递单号查询</title>
	<style>	
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {                               //利用伪元素给div添加三角形
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    
	</style>
</head>
<body>
	<div class="search">
		<div class="con">123</div>
		<input class="jd" type="text" placeholder="请输入您的快递单号">
	</div>
	<script>
		var search = document.querySelector('input');
		var con = document.querySelector('.con');
		search.addEventListener('keyup',function() {           
		//注意这里的事件对象最好为search，不要为document
			if(search.value !== '') {
				con.innerHTML = search.value;
				con.style.display = 'block';
			} else {
				con.style.display = 'none';
			}
		})
		search.addEventListener('focus',function() {
			if(search.value !== '') {
				con.style.display = 'block';
			}
		})
		search.addEventListener('blur',function() {
			con.style.display = 'none';
		})
	</script>
</body>
</html>