如何通过classname分配javascript函数

Question

我有一个购物车应用程序的多个按钮(由PHP生成):

<button class="addtocart" id="<?php echo $code; ?>"> 
    <span id="addtocartbutton">Add to cart</span>
</button>

我想使用功能更新我的购物车:

function AddtoCart() {
    alert("Added!");
}

后来,我想找到由调用它的按钮创建的id($ code)(不知道该怎么做,但也许这是另一个问题).所以我尝试了这个:

document.getElementsByClassName("addtocart").addEventListener("click", AddtoCart());

但它不起作用.它使用onclick工作,但我理解通过创建EventListener来实现它的正确方法.另外,我不能在jQuery中使用on()函数,因为我被迫使用没有它的jQuery Version 1.6.

我查看了/sf/answers/1777150021/,我无法将其分配给ap标签的父级,因为我显然不希望分配p标签中的其他元素这个功能.

Answer 1

虽然给出的答案是正确的，但还有另一种方法：事件委托

将侦听器附加到单个事物（在本例中为文档）body，然后检查实际单击的元素：

警告：即时输入：未经测试

// Only needed *once* and items may be added or removed on the fly without
// having to add/remove event listeners.
document.body.addEventListener("click", addtoCart);

function addtoCart(event) {
    var target = event.target;

    while(target) {
      if (target.classList.contains('addtocart')) {
        break;
      }
      // Note: May want parentElement here instead.
      target = target.parentNode;
    }

    if (!target) {
       return;
    }

    var id = target.dataset.id;
    alert(id + " added!");
}