javascript - 为什么我添加的事件监听器只适用于通过 Id 而不是通过类获取的元素？-6ren

javascript - 为什么我添加的事件监听器只适用于通过 Id 而不是通过类获取的元素？

转载作者：行者123 更新时间：2023-12-01 02:25:31

我正在尝试做一个非常简单的 Java 脚本测验来尝试学习该语言。

var result = document.getElementById("result");

var rightAnswer = document.getElementById("correct").addEventListener("click",correctAnswer);

function correctAnswer(){
 result.innerText="Correct";
};

var wrongAnswer = document.getElementsByClassName("wrong").addEventListener("click",wrongAnswer);

function wrongAnswer(){
 result.innerText="Wrong";
};

当我运行它并测试时，正确的答案工作正常，但错误的答案没有响应。当我查看控制台时，它说“document.getElementsByClassName(...).addEventListener 不是一个函数”，这让我很困惑，因为我看到它的格式与另一行完全相同，但“getElementsByClassName”除外。我不能为同一类的多个按钮添加相同的事件监听器吗？HTML

<!DOCTYPE html>
<html>

<head>
<title>Quiz</title>

</head>

<body>
<p>Who was the first president of the United States?</p>

<button class='button wrong' type='button'>Thomas Jefferson</button>

<button class='button' id='correct' type='button'>George Washington</button>

<button class='button wrong' type='button'>James Madison</button>

<button class='button wrong' type='button'>John F Kennedy</button>

<p id='result'></p>

<script src='quiz.js'></script>

</body>

</html>

最佳答案

错误控制台中的错误是因为您无法运行链接到 getElementsByTagName() 的 addEventListener()。

getElementsByTagName() 返回一个节点set，而 addEventListener() 是 HTML node 的方法对象，而不是节点集对象。

换句话说，它运行在单个节点上。这意味着我们要么需要迭代节点集并将事件绑定(bind)到找到的每个节点，要么使用事件委托(delegate)。

迭代方法

var wrong = document.querySelectorAll(".wrong");
wrong.forEach(function(el) {
    el.addEventListener("click",wrongAnswer, false);
});

委托(delegate)方法

通过事件委托(delegate)，您不是绑定(bind)到每个节点，而是绑定(bind)到共同的父节点或祖先。然后，您询问哪个节点触发了该事件。

我们可以依赖这一点，因为事件“bubble”；它们不仅会为它们所绑定(bind)的元素触发，还会为该元素的子节点/后代节点(从最内层向外)触发。

换句话说，触发元素 (evt.target) 和上下文元素 (this) 可能不相同。

假设所有 .wrong 元素都位于一个公共(public)容器中，ID 为 #wrong。

然后我们可以这样做:

document.querySelector('#wrong').addEventListener('click', function(evt) {
    var trigger_el = evt.target;
    if (!evt.target.matches('.wrong') return; //do nothing - was some other element
    wrongAnswer.call(trigger_el); //call wrongAnswer in the context of the trigger element
}, false);

关于javascript - 为什么我添加的事件监听器只适用于通过 Id 而不是通过类获取的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48844619/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么我添加的事件监听器只适用于通过 Id 而不是通过类获取的元素？