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

最新推荐文章于 2022-07-08 15:11:47 发布

转载最新推荐文章于 2022-07-08 15:11:47 发布 · 669 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/51python/p/10677324.html

文章标签：

#javascript #python #ViewUI

本文深入解析HTML中this关键字的作用域及使用场景，包括onclick事件中this的指向规则，以及在不同上下文中this如何引用正确的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解释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>