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

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++){
ul.children[i].style.backgroundColor = '';
}
// 2）然后才让当前的背景颜色为pink颜色
e.target.style.backgroundColor = 'pink'
})
</script>

3）鼠标事件对象

        1)    client    鼠标在可视区 里面点击时所获取到的x和y坐标

        2） page 鼠标在页面文档的x和y坐标(随滚动条滚动而改变)

        3）screen 鼠标在电脑屏幕的x和y坐标

        4）offset 鼠标相对于被绑定事件的元素的x和y的坐标

<img src="../2 事件和样式/image/3.webp" alt="">
<script>
// 鼠标事件对象mouseEvent
不会随着滚动条变化，只会根据可视区进行获取鼠标的位置
document.addEventListener('click',function(e){
// 1)client
鼠标在可视区 里面点击时所获取到的x和y坐标
console.log(e.clientX,e.clientY);
// 这里打印输出的就是鼠标点击可视区之后获取到的x轴和y轴的坐标（但是这个不会因为滚动条的影响，所导致鼠标在可视区的位置发生变化
// clientY和pageY 的主要区别是：clientY是主要获取鼠标在可视区当中的y的坐标，pageY获取到的是鼠标距离文档最上方的位置
// 2）page 鼠标在页面文档的x和y坐标(随滚动条滚动而改变)(ie9以上的版本使用，但是现在不考虑兼容性的问题，所以主要使用的还是page)
console.log(e.pageX,e.pageY);
//这里打印输出的也是鼠标点击之后获取到的x轴和y轴的坐标 （但是这个会跟随滚动条的滚动，获取，获取到的数值是随着滚动的变化获取的
// 3）screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX,e.screenY);
//这里打印输出的是鼠标相对于显示器屏幕左上角x轴的坐标和	鼠标相对于显示器屏幕左上角y轴的坐标；
// 4）offset 鼠标相对于被绑定事件的元素的x和y的坐标
console.log(e.offsetX,e.offsetY);
// offsetX 鼠标相对于被绑定事件的元素左上角X轴的坐标；
// offsetY 鼠标相对于被绑定事件的元素左上角Y轴的坐标;
})
</script>

案例：跟随鼠标的天使 这个在京东放大图片当中黄色鼠标跟随区域运用的就是这种思想，需要掌握这种思想和解题思路 

案例分析： 1）鼠标不断地移动，使用鼠标移动事件 mousemove  
                    2）在页面中移动，给document 注册事件  
                    3）图片要移动距离，而且不占位置，我们需要使用绝对定位  
                    4）核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片  

<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
//1. mousemove 只要我们鼠标移动1px 就会触发鼠标移动事件
// console.log(1);
//2.当我们每次移动鼠标都会获取到最新的坐标,把这个x和y坐标作为图片的top和left值就可以移动图片
var x=e.pageX;
var y=e.pageY;
console.log('x的坐标是'+x,'y的坐标是'+y)
// 3.我们在给图片left和top值得时候，记住一定要给他添加像素单位，不然鼠标移动的时候，图片获取到的数值是没有带像素单位的，所以图片是无法移动的，所以追加值得时候，需要给他添加像素单位
// 鼠标默认的位置是在图像的左上角，如果想要达到鼠标停留在图像的中间位置，就在获取的坐标位置减去图片的宽高，就可以将鼠标的位置放置在图片的中间位置
pic.style.left = x-50+'px';
pic.style.top = y-80+'px';
});
</script>

4）键盘事件

        1.keypress  键盘按下时触发  键盘按下就一直会触发  不能识别crtl shift等功能键 方向键

        2.keydown   键盘按下时触发  键盘按下就一直会触发   所有键都能识别

        3.keyup  键盘弹起来时触发  keyup是能识别crtl shift等功能键 方向键

// 1.keypress
键盘按下时触发
键盘按下就一直会触发
不能识别crtl shift等功能键 方向键
document.addEventListener("keypress", function() {
console.log("键盘按下时触发,不能识别crtl shift等功能键 方向键")
})
// // 2.keydown
键盘按下时触发
键盘按下就一直会触发
所有键都能识别
document.addEventListener("keydown", function() {
console.log("键盘按下时触发")
})
// // 3.keyup
键盘弹起来时触发
keyup是能识别crtl shift等功能键 方向键
document.addEventListener("keyup", function() {
console.log("键盘弹起来")
})

三个键的执行顺序                keydown->keypress->keyup

5）键盘事件对象

1.键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

        1)我们的 keyup 和  keydown  事件是不区分字母的大小写  a和A得到的都是65
        2）我们的 keypress  事件是区分字母的大小写
        3）三个键的执行顺序  keydown->keypress->keyup

document.addEventListener('keyup',function(e){
console.log('up输出的值'+e.keyCode);
// 我们可以利用 keyup 返回的ASCII码值来判断用户按下了哪一个按键
if(keyCode === 65 ){
alert('你按下的是a键');
}else{
alert('你没有按下的是a键');
}
})

案例 模拟京东按键输入内容  当我们按下s键的时候，光标自动定位到输入框当中

核心思路：1）检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面
                  2）使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
                  3）搜索框获得焦点 ：使用js里面的focus() 方法

<input type="text">
<script>
var search = document.querySelector('input');
// keydown是按钮按下是触发，但是当用户按下时间过长，就会导致字符也会输入到文本框当中
// keyup
当键盘弹起的时候触发，不会出现字符输入到文本框当中
document.addEventListener('keyup',function(e){
// console.log(e.keyCode)
//可以通过打印按钮的ASCII码值得到需要的值
if(e.keyCode === 83){
search.focus();
//但按钮按下s键并且弹起的时候，输入框获得焦点
}
})
</script>

模拟京东快递单号查询
        要求：当我们在文本框中输入内容的时候，文本框上面显示的字符比用户输入的字符自号大一些

案例分析：1）快递单号输入内容的时候，上面的大号字体盒子显示（这里面显示的字体更大）
                  2）表单检测用户输入；给表单添加键盘事件
                  3）同时把快递单号里面的值（value)获取过来赋值给上面的盒子（innerHtml）作为内容
                  4)如果快递单号里面的内容为空，则隐藏大号字体盒子
      注意：5）keydown 和 keypress 在文本框里面的特点：他们两个时间触发的时候，文字还没有落入到文本框当中
                   6）keyup事件触发的时候 ，文字已经落入到文本框当中   综合考虑keyup键才是最符合条件的
                   7）当我们失去焦点的时候，就隐藏这个盒子 
                   8）当我们获得焦点，并且文本框内容不为空，就显示这个盒子

<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
// 1）获取元素
var con = document.querySelector('.con');
var jd = document.querySelector('.jd');
// keyup
当键盘弹起的时候触发，不会出现字符输入到文本框当中
// 当用户按下s键的时候，自动定位到搜索框当中
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
jd.focus();
}
})
jd.addEventListener('keyup', function() {
// 当输入框里面的内容为空，上面的盒子就不会显示
if (this.value == '') {
con.style.display = 'none'
} else {
// 当用户在输入框输入内容，就将盒子显示出来，并且将值赋值给con盒子
con.style.display = 'block'
con.innerHTML = this.value;
// 当用户输入信息之后，让con这个盒子显示出来
// this.value是当前表单里面的值，然后将用户输入的值赋值给con这个盒子
}
})
// 当我们失去焦点，就隐藏这个盒子
jd.addEventListener('blur',function(){
con.style.display = 'none';
})
// 当我们获得焦点，就显示这个盒子
jd.addEventListener('focus',function(){
// 当获得焦点，如果value的值为空就不显示里面的内容，当value的值不为空，就让上面的盒子显示出来
if(this.value !== '')
con.style.display = 'none';
})

最后

以上就是时尚铃铛为你收集整理的e.target 和 this 的区别以及键盘事件的应用的全部内容，希望文章能够帮你解决e.target 和 this 的区别以及键盘事件的应用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。