javascript中的this解释

最新推荐文章于 2021-07-04 20:59:01 发布

辉辉咯

最新推荐文章于 2021-07-04 20:59:01 发布

阅读量133

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/qq_41020281/article/details/80026226

版权

javascript基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序</title>
</head>
<body>
	<!-- 事件：就是用户或者是浏览器执行的某种动作
		 事件处理程序：就是响应事件的函数，事件处理程序的名字是以“on”开头的
	 -->



	<!-- 1、直接在html标签中给与事件处理程序同名的属性赋值js代码 -->
	<button id="btn1" οnclick="console.log('事件处理1')">按键1</button>



	<!-- 2、给与事件处理程序同名的属性赋值一个函数调用语句 -->
	<!-- 使HTML代码与JS代码稍微有点儿分离，不至于第一种那么紧密耦合 -->
	<!-- this代表的是button标签本身 -->
	<button id="btn2" οnclick="func2(this)">按键2</button>



	<!-- 3、DOM0级事件处理程序 -->
	<!-- 这种方式也是早期的写法，但好处是可以将JS与HTML完全分离，前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式) -->
	<button id="btn3">按键3</button>




	<!-- 4、DOM2级事件处理程序 -->
	<button id="btn4">按键4</button>



	<script type="text/javascript">

		//2
		function func2(obj) {
			console.log("事件处理2");
			//obj接收的this的值，表示的是调用该函数的标签节点
			console.log(obj);

			console.log(this);//this---window
		}



		//3
		//找到id为btn3的按键
		var jsBtn3 = document.getElementById("btn3");
		//在这里添加事件处理程序
		jsBtn3.onclick = func3;
		function func3() {
			console.log("事件处理3");
			console.log(this);//this---元素节点
		}
		//移除事件处理程序
		//jsBtn3.onclick = null;
		



		//4、是目前最流行的事件处理程序，各大主流浏览器全部支持
		var jsBtn4 = document.getElementById("btn4");
		//添加事件监听器
		//元素节点.addEventListener("事件名",响应事件的函数,布尔值)
		// 事件名 click mouseover mouseout
		// 函数名或者匿名函数
		// 事件流 false 
		jsBtn4.addEventListener("click", func4, false);
		function func4() {
			console.log("事件处理4");
			console.log(this);//this---元素节点
		}
		//注意：可以绑定多个事件，相互之间不影响
		jsBtn4.addEventListener("click", func5, false);
		function func5() {
			console.log("事件处理5");
		}

		//移除事件
		//注意：
		//1、参数与添加事件时相同
		//2、添加事件时第二个参数不能是匿名函数
		//jsBtn4.removeEventListener("click", func4, false);



		/**能否使用this，this代表的谁？？
		 * 1、在标签中使用，代表的是标签本身
		 *
		 * 2、在函数体中直接使用，代表的是window
		 * 3、在标签中将this作为实参传递到函数中，在函数体中使用形参代表标签本身
		 *
		 * 4、在事件函数中使用，代表标签本身
		 */
		

		/**移除事件
		 * 1、无法移除
		 *
		 * 2、无法移除
		 *
		 * 3、元素节点.onclick = null;
		 *
		 * 4、元素节点.removeEventLinstener("事件名", 响应函数, false);
		 */

	</script>
</body>
</html>

有关this的详细解释，请转到：https://www.cnblogs.com/pssp/p/5216085.html