HTML onclick事件中this关键字为何不可替换？点击变色问题解析

一、代码整体工作流程 #

HTML结构 #

这段HTML定义了一个带点击交互的<div>，核心逻辑如下：

• 给<div>设置初始蓝色背景
• 通过onclick属性绑定点击事件，触发changeColor(this)函数
• 注意：代码里<link rel="script" href="script.js">是错误写法，正确的JS引入应该用<script>标签，不过后面已经补了<script src="script.js"></script>，不影响功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tente você</title>
</head>
<body>
    <div onclick="changeColor(this)" style="background-color: blue;">
        Me aperte para mudar de cor!
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript逻辑 #

changeColor函数负责修改元素背景色，具体步骤：

1. 接收一个element参数，这个参数就是被点击的目标DOM元素
2. 通过element.style.backgroundColor获取元素当前的背景色
3. 判断颜色状态：如果当前是红色，就改成绿色；否则直接切换为红色

function changeColor(element) {
    var currentColor = element.style.backgroundColor;
    if (currentColor == "red") {
        element.style.backgroundColor = "green";
    }
    
    else {
        element.style.backgroundColor = "red";
    }
}

二、为什么修改this代码就会失效？ #

在HTML的事件属性（比如onclick）里，this是特殊关键字，它直接指代触发当前事件的DOM元素——也就是你点击的那个<div>。

当调用changeColor(this)时，相当于把这个<div>元素作为参数传给了changeColor函数，函数才能通过element参数操作它的样式。

如果把this改成其他值（比如删掉this写成changeColor()，或者换成别的变量名），函数的element参数会变成undefined或无效值，找不到要修改的DOM元素，自然没法改变背景色，代码就停止工作了。

内容的提问来源于stack exchange，提问作者Felipe Tavares