e.target 和 this 的区别以及键盘事件的应用

夜夜夜璟归

已于 2022-08-30 19:22:09 修改

阅读量1.3k

点赞数 1

文章标签： html 前端 javascript

于 2022-08-30 19:20:24 首次发布

本文链接：https://blog.csdn.net/m0_72313625/article/details/126610588

版权

本文详细介绍了JavaScript中的e.target和this的区别，事件委托的原理，鼠标事件对象的client、page、screen和offset坐标，以及键盘事件（keydown、keyup、keypress）的特性和顺序。通过实例分析了鼠标跟随效果、键盘输入事件，如模拟京东按键输入内容和快递单号查询的实现，强调了keyup事件在文本框输入中的关键作用。

摘要由CSDN通过智能技术生成

1）e.target 和 this 的区别：

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

通俗的说就是：e.target 点击了哪个元素，就返回那个元素
this 是哪个元素绑定了这个点击事件，那么就返回谁

var div = document.querySelector('div');
			div.addEventListener('click',function(e){
				console.log(e.target);
				console.log(this)
			});
			
			
			var ul = document.querySelector('ul');
			ul.addEventListener('click',function(e){
				//我们给ul绑定了事件   那么this指向的就是绑定事件的对象ul
				console.log(this);
				console.log(e.currentTarget) // 这个存在兼容性的问题
				// e.target指向的是我们点击的那个对象，谁触发这个事件， 我们点击的是li  e.target  指向的就是li
				console.log(e.target);
			})
			
			
			// 处理兼容性问题  只是作为一个了解就可以
			div.onclick =function(e){
				e= e ||window.event;
				var target = e.target || e.srcElement;
				console.log(target);
			}

2）事件委托

事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

<ul>
			<li>知否知否，点我应有弹框在手</li>
			<li>知否知否，点我应有弹框在手</li>
			<li>知否知否，点我应有弹框在手</li>
			<li>知否知否，点我应有弹框在手</li>
			<li>知否知否，点我应有弹框在手</li>
			<li>知否知否，点我应有弹框在手</li>
		</ul>
		
		<script>
			//事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
			var ul = document.querySelector('ul');
			ul . addEventListener('click',function(e){
				// alert('知否知否，点我应有弹框在手');
				// e.target  得到的是当前用户点击的元素，然后返回当前用户点击的对象
				// 通过排他思想当我们点击每个li的时候，让我们点击的li背景色进行变化，其他的li保持原有背景色不变
				for (var i=0;i<ul.children.length ; i