JavaScript onclick中的“ this”是什么?


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

this脚本中是什么意思?


4
@ JMCF125无论如何,他还是很有用。我在Google上搜索了如何获取在onclick事件中被单击的元素,并最终在这里找到了答案。
扔掉帐户

javascript:做什么?为什么不是这样 <a onclick="func(this)" >here</a>
J3STER

1
@ J3STER在onclick中,“ javascript:”前缀不正确。您可以在下面的Tim Down的答案中找到解释。
马里亚诺·德桑兹

Answers:



34

它指的是在该元件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。)


22

事件处理程序属性(例如onclick)的值应仅为JavaScript,且不带任何“ javascript:”前缀。URL中使用javascript:伪协议,例如:

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

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


1
有趣的是,我严格地说,这个答案仅提供有关问题的建议,而不是直接回答问题。
Tim Down

是的...您并未真正回答问题:-/没有什么私人的!
戴夫

1
@戴夫:足够公平。在我写这篇文章的时候,主要问题已经回答了。我的回答可能应该是评论,但我怀疑我当时没有足够的代表来添加评论。活到老,学到老。
蒂姆·唐

8
当时没有足够的代表?吐出他的酒
乔纳森(Jonathan)

5

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

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

调用hidethis将隐藏的元素。它仅返回单击的元素,即使它与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>


3

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>


2

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

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


1

this引用该onclick方法所属的对象。因此,内部func this将是a元素的DOM节点,并且this.innerText将是here

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.