Element 中的“This”关键字用法答案

【问题标题】："This" Keyword Usage in ElementElement 中的“This”关键字用法
【发布时间】：2017-01-19 14:21:26
【问题描述】：

在这段代码中，“this”关键字用于函数调用参数中的div元素中，所以我的问题是“this”关键字用于对象或全局对象，如窗口，那么为什么在这里我们使用“this”关键字呢？在这里使用这个的目的，请解释一下。

<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">

<div class="d1" onclick="highlight(this)">1 
    <div class="d2" onclick="highlight(this)">2
        <div class="d3" onclick="highlight(this)">3
        </div>
    </div>
</div>

<script>
function highlight(elem) {
    elem.style.backgroundColor='yellow'
    alert(elem.className)
    elem.style.backgroundColor = ''
}
</script>

</body>
</html>

【问题讨论】：

所以你得到了点击了什么的参考？
可能重复：stackoverflow.com/questions/925734/…
我建议也阅读MDN article about this keyword
如果您想了解更多关于this 的信息，请尝试在highlight 函数中插入console.log(elem);。
How does the "this" keyword work?的可能重复

标签： javascript this keyword

【解决方案1】：

这里this 指的是元素，因为它是一个对象。

当您在对象的范围内（在构造函数内或原型中）时，this 会保存您当前正在更改的实例

元素是 javascript 中的对象。它们有一个 onclick 属性，您可以将其更改为您喜欢的任何功能。上面的代码可以翻译成如下：

element.onclick = function() {
    highlight(this);
};

您显然可以像这样向元素添加高亮功能：

HTMLDivElement.prototype.highlight = function() {
    // Stuff
};

然后你可以把this.highlight()放在onclick中，但这不会太干净。

旁注：如果您不在对象的范围内，则 this 指的是窗口对象。这是因为您放在全局范围内的内容将在该对象内可用。这就是为什么您可以通过简单地调用它们或在它们前面加上window. 来访问所有内容

【讨论】：

【解决方案2】：

在您的 sn-p 中，this 的用途如果遵循：this 是当前对象（DOM 元素）的 reference，在您的情况下，this 指的是 div clicked。

在您的示例中，将 backgroundColor 应用于所有事件，因为 event bubbling 和 capturing 起作用。要停止此使用 stopPropagation 方法并将 event 传递给函数。

这里是解决方案：

function highlight(elem,event) {
    event.stopPropagation();
    elem.style.backgroundColor='red';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d1" onclick="highlight(this,event)">1 
    <div class="d2" onclick="highlight(this,event)">2
        <div class="d3" onclick="highlight(this,event)">3
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

onclick 中的“this”关键字只是对 onclick 所在的 DOM 元素的引用。
例如，类“d1”的第一个 div 中的“this”是对该 div 的引用 - 类“d1”的 div。在具有“d2”类的第二个 div 中，“this”是对该 div 的引用 - 具有“d2”类的 div 等等...

【讨论】：