如何创建一个基本的点击事件？ [复制]答案

【问题标题】：How to create a basic click event? [duplicate]如何创建一个基本的点击事件？ [复制]
【发布时间】：2018-08-05 21:09:09
【问题描述】：

我已经为此苦苦挣扎了一段时间，并且一直在关注文档到“T”，如下所述： https://www.w3schools.com/js/js_htmldom_eventlistener.asp 但我仍然遇到错误。我的代码：

let card = document.getElementsByClassName('card');
card.addEventListener('click', cardClicked);

function cardClicked(){

    console.log('clicked');
}

我收到以下错误：

card.addEventListener 不是函数

一定有一些我完全错过的基本编程概念。有人可以帮忙吗？

【问题讨论】：

getElementsByClassName 返回一个对象集合，您需要选择其中一个对象来应用事件监听器。现在，您正在尝试向集合添加点击侦听器。
有趣。我刚刚使用了 querySelector vs etElementsByClassName 并且它起作用了。谢谢！
然而，我才意识到它只会点击一次.....你知道我会用什么来让某个东西被点击多次吗？

标签： javascript function click dom-events

【解决方案1】：

正确的方法是像这样订阅点击事件：

document.addEventListener("click", function cardClicked(){
    console.log('clicked');
});

这里不需要使用任何查询选择器。

更新：如果您只想订阅特定的类元素到事件，您可以尝试这样做：

let cards = document.getElementsByClassName('card');

 Array.from(cards).forEach(function (element) {
     element.addEventListener('click', function cardClicked() {
        console.log('clicked');
     });
 });

【讨论】：

谢谢。这有效，但我试图让卡片只被点击。这看起来会影响整个文档。
好吧，我更新了答案。请尝试更新的解决方案
效果很好！！谢谢！