JavaScript 面向对象编程中 DOM 元素绑定事件的常见错误与修复指南-js教程-PHP中文网

JavaScript 面向对象编程中 DOM 元素绑定事件的常见错误与修复指南

本文详解如何在 JavaScript 类（Class）中正确绑定 DOM 元素点击事件，解决因 this 指向丢失、方法调用时机不当及作用域混乱导致的 ReferenceError: popUp is not defined 等典型问题。

本文详解如何在 javascript 类（class）中正确绑定 dom 元素点击事件，解决因 `this` 指向丢失、方法调用时机不当及作用域混乱导致的 `referenceerror: popup is not defined` 等典型问题。

在使用面向对象方式组织 JavaScript 代码时，将 DOM 元素与类实例关联是提升可维护性的关键实践。但初学者常因对 this 绑定、事件监听器注册时机及作用域的理解偏差，引发如 popUp is not defined 的运行时错误——这并非函数未声明，而是方法调用上下文丢失所致。

? 错误根源分析

原代码中存在三个核心问题：

popUp 调用未通过 this 访问
在 getter whenClicked 中直接写 popUp(${this.direction})，此时 popUp 是局部变量名而非类方法，JS 尝试在全局作用域查找，自然报错。
事件监听器注册方式错误
addEventListener("click", popUp(...)) 实际上立即执行了 popUp()（返回 undefined），并将 undefined 作为回调传入，而非传递函数引用。正确做法是传入函数本身（或箭头函数）。
this 指向失效风险
即使修正为 this.popUp，若以普通函数形式传入 addEventListener（如 this.popUp），this 会在事件触发时指向被点击的 DOM 元素，而非类实例，导致 this.direction 无法访问。

✅ 正确实现：在构造函数中绑定事件 + 箭头函数保 `this`

推荐将事件监听逻辑封装进构造函数，并使用箭头函数自动绑定 this：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

class GridButton {
  constructor(button, direction) {
    this.button = button;
    this.direction = direction;
    // ✅ 正确：箭头函数确保 this 指向当前实例
    this.button.addEventListener("click", () => this.popUp());
  }

  popUp() {
    // ✅ 正确：通过 this 访问实例属性
    gridContainer.style.zIndex = "-1";
    gridContainer.style.opacity = "0.2";
    dogBone.style.display = "block";

    // 注意：animate() 方法签名已更新（现代标准）
    dogBone.animate(
      [
        { transform: "scale(0, 0)", transformOrigin: this.direction },
        { transform: "scale(1, 1)" }
      ],
      {
        duration: 400,
        iterations: 1
      }
    );
  }
}

⚠️ 注意事项：

dogBone.animate() 的参数格式已变更：第一个参数为关键帧数组 [{...}, {...}]，第二个参数为选项对象（原代码中误写为三个独立对象）。

所有全局 DOM 变量（如 gridContainer, dogBone）应在类外部定义并确保选择器正确（需加 . 表示 class，如 ".services_grid_container"）。

初始化时避免重复使用同一索引（如 gridItems[2] 被用了两次），应使用 gridItems[5] 补全第六项。

? 完整可运行示例

// DOM 查询（务必添加 class 前缀）
const gridContainer = document.querySelector(".services_grid_container");
const dogBone = document.querySelector(".dog-bone");

// 映射 grid items
function mapContainers() {
  return ["1", "2", "3", "4", "5", "6"].map(i => 
    document.querySelector(`.item${i}`)
  );
}

// 核心类：GridButton
class GridButton {
  constructor(button, direction) {
    if (!button) {
      console.warn(`⚠️ 未找到对应元素 .item${direction}，跳过绑定`);
      return;
    }
    this.button = button;
    this.direction = direction;
    this.button.addEventListener("click", () => this.popUp());
  }

  popUp() {
    gridContainer.style.zIndex = "-1";
    gridContainer.style.opacity = "0.2";
    dogBone.style.display = "block";

    dogBone.animate(
      [
        { transform: "scale(0, 0)", transformOrigin: this.direction },
        { transform: "scale(1, 1)" }
      ],
      { duration: 400, fill: "forwards" } // 推荐添加 fill: "forwards" 保持最终状态
    );
  }
}

// 初始化入口
function init() {
  const items = mapContainers();
  if (items.some(el => !el)) {
    console.error("❌ 部分 grid item 未找到，请检查 HTML class 名称");
    return;
  }

  new GridButton(items[0], "top left");
  new GridButton(items[1], "top right");
  new GridButton(items[2], "left");
  new GridButton(items[3], "right");
  new GridButton(items[4], "bottom left");
  new GridButton(items[5], "bottom right"); // 修正索引
}

// 页面加载后执行
document.addEventListener("DOMContentLoaded", init);