事件监听函数中的this

最新推荐文章于 2023-04-03 11:18:42 发布

萤火虫塔莉

最新推荐文章于 2023-04-03 11:18:42 发布

阅读量2.3k

点赞数 4

分类专栏： JavaScript

本文为博主原创文章，未经允许禁止转载

本文链接：https://blog.csdn.net/sinat_27088253/article/details/92696313

版权

18 篇文章 0 订阅

订阅专栏

特别简单的一个html结构

<div class="test">
			
</div>

测试需求为点击显示this指向

<div class="test1" onclick="t();">
			
</div>

function t(){
			console.log(this);
}

浏览器控制台结果

示意图
在这种情况下，相当于告诉浏览器去找到t函数，然后执行它，t函数在全局对象空间中，所以this指向window
2. 普通匿名函数

var test = document.querySelector('.test');
test.addEventListener('click',function(event){
	console.log(this);
});

浏览器控制台结果

3. 箭头函数

var test = document.querySelector('.test');
test.addEventListener('click',()=>{
		console.log(this);
});

浏览器控制台结果
箭头函数结果
分析
普通的匿名函数中this指向触发事件的元素
箭头函数由于不会创建自己的this，它只能从作用域链的上层继承this，所以this指向全局对象window

关注