javascript - 为多个元素的数据属性添加更改监听器

Question

假设 JS 渲染了一些输入字段，它们都有不同的 id 作为 data-id 值。如何将事件监听器添加到具有 data-id 属性的所有输入，然后将其作为 AJAX 请求发送到 PHP？

<input type="text" data-id="${element.id}" class="review" name="review" placeholder="Type your review"/>

xmlHttp.open("GET", "/review=" + << input field value here >>, true);

Answer 1

您没有指定要监听哪个事件。我假设了一个“更改”事件，但您可以将其修改为您选择的任何内容。

您可以使用 querySelectorAll 按属性名称选择元素，并将属性名称放在方括号中。

const els = Array.from(document.querySelectorAll('[data-id]'));
for(const el of els) {
  el.addEventListener('change', () => {
    //your ajax code here
  });
}