在onclick、onblur中使用this

红太狼 2021-09-16 13:44 348阅读 0赞

# 像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>

咱们看看实际效果图：  
![在这里插入图片描述][70]  
这里大家就可以看出来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>

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

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

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

[70]: /images/20210813/09825b50b587424dac58a0da59498fcf.png
[70 1]: /images/20210813/23ee3d40bd3547f2b60c6c4e96d55e23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/d58c8fc4241043c5aeff2616879b0005.png