What's "this" in JavaScript onclick?

小开

在您询问的情况下，this表示 HTMLDOM 元素。

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

小开

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

小开

它引用 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。)

小开

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

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

小开

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

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

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

小开

在 JavaScript 中，this指的是包含动作的元素:

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>

小开

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

console.log(this);

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

以下连结亦有描述:-

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

小开

关键字这个在 AddEventListener事件中

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>