为何addEventListener绑定点击事件无效？静态方法相关问题求助

开发者阿泽

2026-7-19

问题分析与解决方案

错误原因

你的JavaScript代码执行时机过早，当const p = document.querySelector('p')执行时，HTML中的<p>元素还未被浏览器渲染到DOM树中，因此p的值为null。给null绑定点击事件不会生效，所以点击<p>元素没有反应。而你直接调用Bee.welcome()能生效，大概率是在DOM完全加载完成后（比如浏览器控制台中）执行的调用，此时p已经能被正确获取。

解决方法

以下两种方式都能解决问题，且完全保留你要求的两个static方法：

方法1：将JavaScript代码放在`<body>`标签末尾

把JS代码放在页面所有DOM元素之后，确保执行时<p>已经存在：

<!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">
  <title>static method practice</title>
</head>

<body>
  <p></p>
  <!-- 脚本置于body末尾 -->
  <script>
    const p = document.querySelector('p');

    class Bee {
      static welcome_tips() {
        return 'Welcome to here';
      }

      static welcome() {
        p.innerHTML = this.welcome_tips();
      }
    };

    p.addEventListener('click', () => {
      Bee.welcome();
    });
  </script>
</body>

</html>

方法2：监听DOM加载完成事件

通过DOMContentLoaded事件确保DOM完全加载后再执行JS代码，这种方式不受脚本放置位置限制：

document.addEventListener('DOMContentLoaded', () => {
  const p = document.querySelector('p');

  class Bee {
    static welcome_tips() {
      return 'Welcome to here';
    }

    static welcome() {
      p.innerHTML = this.welcome_tips();
    }
  };

  p.addEventListener('click', () => {
    Bee.welcome();
  });
});