js事件高级-事件委托 +常用鼠标事件+常用键盘事件

最新推荐文章于 2024-08-08 20:38:49 发布

phoebemeng

最新推荐文章于 2024-08-08 20:38:49 发布

阅读量305

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/phoebemeng/article/details/125796409

版权

javascript 前端开发语言

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件委托原理

不在每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

之操作了一次DOM，提高程序性能。

常用鼠标事件

1、禁止鼠标右键菜单
context menu 取消默认的上下文菜单

//阻止右键菜单
			document.addEventListener('contextmenu' ,function(e){
				e.preventDefault();
			})

2、禁止鼠标选中文字
selectstart

//禁止 鼠标选中
			document.addEventListener('selectstart' ,function(e){
				e.preventDefault();
			})

3、鼠标事件对象
现阶段主要是鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

e.clientX 可视页面的X轴坐标
e.clientY 可视页面的Y轴坐标
不管屏幕管不滚动，都以可视窗口为准

e.pageX 页面文档的X轴坐标 ie9+支持
e.pageY 页面文档的Y轴坐标

e.screenX 距离电脑屏幕的X轴坐标
e.screenY 距离电脑屏幕的Y轴坐标

4、图片跟随鼠标移动

鼠标移动事件 mousemove 只要鼠标移动1px就会触发事件。
在页面中移动，给document注册事件
千万不要忘记给top和left添加px单位

<style>
			img{
				position: absolute;
				top: 1px;
				width: 30px;
				
			}
		</style>

<body>
		<img src="mouse.gif" alt="">
		<script>
			//获得图片
			var pic = document.querySelector('img');
			//注册事件
			document.addEventListener('mousemove',function(e){
				console.log(e.pageX);
				console.log(e.pageY);
				pic.style.top=e.pageY-15 +'px';
				pic.style.left=e.pageX-15 +'px';
			})
		</script>
	</body>

常用键盘事件

1、keyup 按键弹起的时候触发
2、keydown 按键按下的时候触发
3、keypress 按键按下的时候触发不能识别功能键例如：ctrl 、alt、shift

4、三个时间段执行顺序 keydown —keypress—keyup

键盘事件对象
keycode 返回键盘事件对象的ASCII值
keyup和keydown 事件不区分字母大小写；keypress区分大小写

案例
判断键盘输入内容，搜索框获得焦点。

<body>
		<input type="text" name="" id="">
		<script>
			//获取搜索框
			var search = document.querySelector('input');
			//注册事件  在页面内按下s键,搜索框获得焦点
			document.addEventListener('keyup',function(e){
				// console.log(e.keyCode)  s的ASCII是83
				if(e.keyCode===83){
					search.focus();
				}
			})
		</script>
	</body>

案例–快递单号查询
搜索快递时的提示栏放大字体效果

<style>
			.search {
				width: 300px;
				height: 100px;
				margin: 20px 0 0 30px;
			}
			.con {
				/* display: none; *//* 隐藏后不占位置,下面的盒子会移动 */
				visibility: hidden;
				position: relative;
				width: 170px;
				height: 25px;
				border: 1px solid #aaa;
				line-height: 25px;
				margin-bottom: 8px;
			}
			.con::after {
				content: '';
				/* 伪元素一定要加content */
				position: absolute;
				top: 26px;
				left: 15px;
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid #aaa;
			}
		</style>

<body>
		<div class="search">
			<div class="con">12334</div>
			<input type="text" placeholder="请输入快递单号">
		</div>

		<script>
			//获取
			var input =document.querySelector('input');
			var con = document.querySelector('.con');
			//注册事件  鼠标聚焦在输入框时
			input.addEventListener('keyup',function(e){
				if(this.value===''){
					con.style.visibility= 'hidden';
				}else{
					con.style.visibility= 'visible';
					con.innerHTML = this.value;
				}
			})
			//失去焦点 就隐藏盒子
			input.addEventListener('blur',function(){
				con.style.visibility= 'hidden';
			})
			//获得焦点就显示盒子
			input.addEventListener('focus',function(){
				if(this.value!==''){
					con.style.visibility= 'visible';
				}
			})
		</script>
	</body>

注意：keydown 和keypress 他们两个事件触发的时候，文字还没有落入文本框中。而且keypress不能识别删除健。所有不用这两个事件。