Question

在此代码中＆＃34;这个＆＃34;关键字在函数调用参数的div元素中使用，所以我的问题是＆＃34;这个＆＃34;关键字用于对象或全局对象，如窗口，所以为什么我们在这里使用＆＃34;这个＆＃34;关键字是什么意思在这里使用它，请解释某人。

＆＃13;

<!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>

＆＃13;

Answer 1

在您的代码段中，this的目的如果遵循：this是reference当前对象（DOM元素），在您的情况下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>

Answer 2

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

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

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

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

您显然可以将高亮度功能添加到元素中，如下所示：

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

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

旁注：如果您不在对象的范围内，那么这将引用窗口对象。这是因为您在全局范围内放置的内容将在该对象中可用。这就是为什么您可以通过简单地调用它们或将window.放在它们之前来实现所有目标

Answer 3

onclick中的

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

＆＃34;这＆＃34;元素中的关键字用法

3 个答案: