JavaScript onclick 中的“this”是什么？答案

【问题标题】：What's "this" in JavaScript onclick?JavaScript onclick 中的“this”是什么？
【发布时间】：2009-05-29 12:28:10
【问题描述】：

<a onclick="javascript:func(this)" >here</a>

this 在脚本中是什么意思？

【问题讨论】：

@JMCF125 无论如何他还是有用的。我在 Google 上搜索了如何获取在 onclick 事件中被点击的元素，最后在这里找到了答案。
javascript: 做什么？为什么不是这样<a onclick="func(this)" >here</a>
@J3STER onclick 中的“javascript:”前缀不正确。你可以在Tim Down's answer below找到解释。

标签： javascript

【解决方案1】：

在您询问的情况下，this 代表 HTML DOM 元素。

所以点击的是<a>元素。

【讨论】：

有人可以链接到规范吗？天真地看着w3.org/TR/DOM-Level-3-Events 是徒劳的。

【解决方案2】：

指DOM中onclick属性所属的元素：

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

（本例使用jQuery。）

【讨论】：

【解决方案3】：

onclick 等事件处理程序属性的值应该只是 JavaScript，没有任何“javascript:”前缀。 URL中使用了javascript:伪协议，例如：

<a href="javascript:func(this)">here</a>

不过，您应该优先使用onclick="func(this)" 表单。另请注意，在我上面的示例中，使用 javascript: 伪协议“this”将引用窗口对象而不是 <a> 元素。

【讨论】：

有趣的反对票，虽然我想严格来说这个答案只提供有关问题的建议，而不是直接回答问题。
是的...你并没有真正回答这个问题：-/ 没有什么私人的！
@Dave：很公平。在我写这篇文章的时候，主要问题已经得到了回答。我的回答可能应该是评论，但我怀疑我当时可能没有足够的代表来添加评论。生活和学习。
当时没有足够的代表？ 吐出他的酒

【解决方案4】：

在 JavaScript 中，this 指的是包含动作的元素。例如，如果您有一个名为 hide() 的函数：

function hide(element){
   element.style.display = 'none';
}

用this 调用hide 将隐藏元素。它只返回被点击的元素，即使它与 DOM 中的其他元素相似。

例如，您可能有this 在下面的 HTML 中单击一个数字只会隐藏单击的项目符号点。

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

【讨论】：

【解决方案5】：

这里 (this) 是一个包含 dom 元素的所有特征/属性的对象。你可以看到

console.log(this);

这将显示具有层次结构的 dom 元素的所有属性属性。你可以通过这个来操作dom元素。

也在下面的链接中描述：-

http://www.quirksmode.org/js/this.html

【讨论】：

【解决方案6】：

addEventListener事件中的

关键字this

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

【讨论】：

【解决方案7】：

调用函数时，单词“this”是对调用函数的对象的引用。

在您的示例中，它是对锚元素的引用。在另一端，函数调用然后通过传递的参数访问元素的成员变量。

【讨论】：

【解决方案8】：

this 指的是onclick 方法所属的对象。所以在 func this 内部将是 a 元素的 DOM 节点，this.innerText 将是 here。

【讨论】：