时间戳

首页 > 解决方案 > 如何修复查询选择器 (DOM) 和事件监听器？

javascript - 如何修复查询选择器 (DOM) 和事件监听器？

问题描述

我目前正在做 Angela Yu 的网络开发课程。但是，我坚持一件事。在第 13 节，她介绍了事件监听器。但是，当我尝试单击“W”按钮时，没有弹出警告框。我知道 JavaScript 文件与 HTML 文件正确连接，因为我可以在编写 alert("Hello World"); 时弹出一个简单的警报。此外，当我运行此部分的已完成文件时，它运行良好。我只是被困在这小步上。

document.querySelector("button").addEventListsener("click", handleClick);

function handleClick() {
  alert("I got clicked!");
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<h1 id="title">Drum  Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>


<script src="index.js" charset="utf-8"></script>

<footer>
  Made with ❤️ in London.
</footer>

标签： javascripthtmlfunctiondomevent-listener

解决方案

正确拼写 addEventListener

请委托

在键入之前单击代码段

const set = document.querySelector(".set");
const keys = set.querySelectorAll('.drum');

const handleClick = e => {
  const tgt = e.target;
  if (tgt.classList.contains('drum')) {
    console.log(tgt.textContent, "got clicked!");
  }
};

const keyArr = [...keys].map(key => key.textContent.toUpperCase());

const handleKey = e => {
  const tgt = e.target;
  const key = e.code.slice(-1)
  const index = keyArr.indexOf(key)
  if (index != -1) keys[index].click()
};


set.addEventListener("click", handleClick);
document.addEventListener("keypress", handleKey);
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<h1 id="title">Drum  Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>


<script src="index.js" charset="utf-8"></script>

<footer>
  Made with ❤️ in London.
</footer>

推荐阅读