Javascript 中调参数的脚本onclick="select(this)" this 怎么解释

时间:2023-03-09 03:17:25
Javascript 中调参数的脚本onclick="select(this)" this 怎么解释

解释1、

this,指当前的onclick所在的节点本身。

比如:

<div onclick='select(this)"></div>

则当点击div时,this就是div这个dom节点。

解释2、

input标签中 onclick="test(this)" 在浏览器解析后,会自动转换成 javascript的事件函数
input对象.onclick = function (event) {
test(this)
}

当以对象里的方法的方式调用函数时,函数内的 this 是调用该函数的对象
当函数被用作事件处理函数时,它的this指向触发事件的元素

解释3、

<!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>