Question

我正在练习我的 vanilla JS 并尝试创建动态元素。我遇到了一些有趣的行为。我只是创建一个按钮，单击它，然后将其渲染到 DOM 上。但是后来我想创建另一个将鼠标悬停在 h1 元素上并更改颜色的事件，但是我收到了“未捕获的类型错误：无法读取 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”元素您可以改为将其移动到按钮事件侦听器功能中

Also 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!");
  });
});

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

2 个答案: