如何使用带有普通Javascript的部分ID捕获点击元素?

如何使用带有普通Javascript的部分ID捕获点击元素?,javascript,Javascript,我希望在单击一系列元素中的一个时运行函数,并希望使用部分ID将这些元素作为目标。当前,单击时只有第一个元素响应。我做错了什么?我的代码: HTML: 我已尝试将querySelector更改为包含“a[id^=selector-]”,但只有第一个元素希望在单击时响应。使用*=selector,id作为属性,document.querySelectorAll 然后将onclick添加到给定的检索元素数组的所有元素中 常量els=Array.fromdocument.querySelectorAl

我希望在单击一系列元素中的一个时运行函数,并希望使用部分ID将这些元素作为目标。当前,单击时只有第一个元素响应。我做错了什么?我的代码:

HTML:

我已尝试将querySelector更改为包含“a[id^=selector-]”,但只有第一个元素希望在单击时响应。

使用*=selector,id作为属性,document.querySelectorAll

然后将onclick添加到给定的检索元素数组的所有元素中

常量els=Array.fromdocument.querySelectorAll'[id*=selector-]; 控制台长度; els.forEachel=>el.onclick=>console.log'Clicked el:',el; 零 一 二
为什么不在包装元素的上下文中使用类名选择器或标记名选择器作为包装元素??document.querySelector就是这样工作的;尝试使用document.querySelectorAll并在returnedNodeList上进行迭代。是否尝试像JQuery那样侦听与选择器匹配的每个元素的事件,即使该元素是稍后创建的,或者它的属性更改为现在与选择器匹配?
<div>
    <a id="selector-0">Zero</a>
</div>
<div>
    <a id="selector-1">One</a>
</div>
<div>
    <a id="selector-2">Two</a>
</div> 
document.querySelector('[id^="selector-"]').onclick = function(){
    var id_selector = this.getAttribute('id');
    alert('ID: ' + id_selector);
}