Question

获取“未捕获的类型错误：无法读取 null 的属性‘addEventListener’”

2021-05-11

527

javascript

我正在练习使用原生 JS，并尝试创建动态元素。我发现了一些有趣的行为。我只是创建一个按钮，单击它，然后让它呈现到 DOM 上。但随后我想创建另一个事件，将鼠标悬停在 h1 元素上并更改颜色，但我收到“未捕获 TypeError：无法读取 null 的属性‘addEventListener’”。如果 DOM 上有 h1，为什么会显示为 null，为什么现在显示无法读取 null 的属性“addEventListener”？

HTML
<!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>Creating Dynamic Elements</title>
</head>
<body>
  
</body>
</html>

JavaScript

// const h1 = document.querySelectorAll('h1');  
const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);

button.addEventListener('click', function() {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.querySelector('body').appendChild(h1);
});

document.querySelector('h1').addEventListener('mouseover', function() {
  alert("It works!");
});

Answer 1

由于加载时没有 h1，请在函数内部添加 h1 事件监听器。

const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);

button.addEventListener('click', function() {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.querySelector('body').appendChild(h1);

  h1.addEventListener('mouseover', function() {
    alert("It works!");
  });
});

Answer 2

它不会起作用，因为在执行 addEventListner 行时，您的 DOM 没有任何“h1”元素您可以将其移动到按钮事件监听器函数内部

此外， document.querySelect() 仅使用选择器选择第一个元素如果您希望它与您添加的每个 h1 元素一起工作，您应该使用引用您在代码中动态创建的元素的变量

const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);

button.addEventListener('click', function() {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.querySelector('body').appendChild(h1);
  /* This will only select the first h1 element in the whole document
  document.querySelector('h1').addEventListener('mouseover', function() {
    alert("It works!");
  });
  */
  //This will add the event listener to every h1 element you create
  h1.addEventListner('mouseover', function() {
    alert("It works!");
  });
});