input标签中 onclick="test(this)" 为什么是用this呢？

lf1218 2016-04-01 04:56:11

<html >
<head>

<script>
function test(valueObj){
//window.alert(valueObj.value);
var mydiv=document.getElementById("div1")
//window.alert(mydiv.style.width);
if (valueObj.value=="黑色")
{
//window.alert("这是黑色");
mydiv.style.backgroundColor="black";
}else if (valueObj.value=="红色")
{
//window.alert("这是红色");
mydiv.style.backgroundColor="red";
}
}

</script>
</head>

<body>
<div id="div1" style="width:300px;height:250px;background-color:red">div1</div>
<input type="button" value="黑色" onclick="test(this)"/>

<input type="button" value="红色" onclick="test(this)"/>
</body>
</html>

input标签中 onclick="test(this)" 为什么必须是this呢？this代表的是整个input控件，事件源吗？
新手上路，还望指导，感谢万分！

...全文

978 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

文盲老顾 2016-04-02

打赏
举报

this 就是当前对象，谁触发的事件就是谁


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <div  id="div1" style="width:300px;height:250px;background-color:red">div1</div>
  <input type="button" value="黑色" onclick="o.changeColor(this)"/> <!-- 这里的 this 是触发对象本身，作为参数传递给对象 o 的 changeColor 方法 -->
  <input type="button" value="红色" onclick="o.changeColor(this)"/> 
  <script>
  var o = {
	  bgcolor : 'red',
	  obj : document.getElementById('div1'),
	  changeColor:function(btn){
                  // 这里的 this 是对象 o 本身，而传递进来的对象作为参数，被方法重命名了，即变量 btn
		  this.bgcolor = this.obj.style.background = btn.value=='黑色'?'black':'red';
	  }
  }
  </script>
 </body>
</html>

天际的海浪 2016-04-01

打赏
举报

input标签中 onclick="test(this)" 在浏览器解析后，会自动转换成 javascript的事件函数 input对象.onclick = function (event) { test(this) } 当以对象里的方法的方式调用函数时，函数内的 this 是调用该函数的对象当函数被用作事件处理函数时，它的this指向触发事件的元素