JavaScript事件对象属性e.target和this的区别
前言:
Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
比如:
谁绑定了这个事件。
鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
其中事件对象属性e.target,它和this的指向有所不同。
案例:
html:
<div>div<span>span</span>
</div>
css:
div {width: 100px;
height: 100px;
background-color: red;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: yellow;
}
预览:
js:
var div = document.querySelector('div');div.addEventListener('click', function(e) {
console.log(this); // 给div绑定了事件,那么this就指向div
console.log(e.target); // e.target指向点击的那个对象
})
实现结果:
点击div:
this返回div标签,e.target返回div标签
点击span:
this返回div标签,e.target返回span标签
分析:
因为div绑定了点击事件,那么this返回的都是div;
点击div,e.target返回div;点击span,e.target返回span。
总结:
this返回的是绑定事件的对象(元素);e.target返回的是触发事件的对象(元素)。
简单来说,this:哪个元素绑定了这个点击事件,就返回哪个元素;e.target:点击了哪个元素,就返回哪个元素。
站长推荐
1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云
2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/9705
以上是 JavaScript事件对象属性e.target和this的区别 的全部内容, 来源链接: utcz.com/a/61358.html