在onclick、onblur中使用this

最新推荐文章于 2024-04-20 15:25:58 发布

三金de鑫

最新推荐文章于 2024-04-20 15:25:58 发布

阅读量2.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_42345237/article/details/82932994

版权

javascript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

像onclick、onblur这种直接写在标签中的事件，该如何使用this？

我们一般使用this，会首先获取到相对应的dom对象，比如document.getElementById(),或者用jquery的方法$()来获取，然后进行相应的操作。
如果说咱们没有获取相应的dom对象，那么this就代表的是全局对象window。

那如果说是函数作为对象的方法调用，就会是另一个样子，咱们来看个例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>this指向</title>
</head>
<body>
	<p id="test">这是一个测试</p>
</body>
</html>
<script type="text/javascript">
	function textThis(){
		console.log(this.innerHTML);
	}
	window.onload = function(){
		var textId = document.getElementById("test");
		textId.showText = textThis;		//将textThis这个方法赋值给textId.showText（showText是自己定义的）
		textId.showText();				//现在等同于在调用textThis这个方法
	}
</script>

咱们看看实际效果图：
在这里插入图片描述
这里大家就可以看出来this的指向就是咱们的p标签了。
那么回到主题，直接在onclick中怎么加呢？其实这个就更简单了，一起来看一下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>this指向</title>
</head>
<body>
	<p id="test" onclick="textThis(this.innerHTML)">这是一个测试</p>
</body>
</html>
<script type="text/javascript">
	
	function textThis(str){
		console.log(str);
	}
</script>

咱们在原来的基础上做一下修改，然后可以看到，效果是一样的：

在这里插入图片描述
在新的代码里面，this.innerHTML就是p标签的内容，this就是指的这个对象。

公众号：Coder 杂谈，欢迎关注
在这里插入图片描述

三金de鑫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在onclick、onblur中使用this

像onclick、onblur这种直接写在标签中的事件，该如何使用this？我们一般使用this，会首先获取到相对应的dom对象，比如document.getElementById(),或者用jquery的方法$()来获取，然后进行相应的操作。如果说咱们没有获取相应的dom对象，那么this就代表的是全局对象window。那如果说是函数作为对象的方法调用，就会是另一个样子，咱们来看个例子：...
复制链接

扫一扫