JavaScript onclick中的“this”是什么?

时间:2009-05-29 12:28:11

标签: javascript

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

脚本中this的含义是什么?

8 个答案:

答案 0 :(得分:88)

在您询问的情况下,this表示HTML DOM元素。

所以它会被点击的<a>元素。

答案 1 :(得分:31)

它指的是onclick属性所属的DOM中的元素:

<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。)

答案 2 :(得分:20)

事件处理程序属性(如onclick)的值应该只是JavaScript,没有任何“javascript:”前缀。 javascript:伪协议用于URL,例如:

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

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

答案 3 :(得分:5)

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

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

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

答案 4 :(得分:4)

这里(this)是一个包含dom元素的所有特性/属性的对象。

你可以看到
console.log(this);

这将显示带有层次结构的dom元素的所有属性属性。 您可以通过此操作dom元素。

还在以下链接中描述: -

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

答案 5 :(得分:2)

this指的是onclick方法所属的对象。因此,func this内部将是a元素的DOM节点,而this.innerText将是here

答案 6 :(得分:2)

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

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

答案 7 :(得分:2)

addEventListener 事件中的

关键字 this

&#13;
&#13;
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 */
});
&#13;
li {
  cursor: pointer;
}
&#13;
<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>
&#13;
&#13;
&#13;