Question

我有一个关于如何使用JavaScript选择HTML页面中的所有标记元素并向其应用事件监听器的问题。

使用jQuery，我们可以这样做

$('td').on('click', function(){...});

但是我怎么能用纯JavaScript来做呢？我有这段代码：

const el = document.getElementsByTagName('td');
el.addEventListener("click", function(){

    let cellColor = document.getElementById("colorPicker").value;
    this.backgroundColor = cellColor;
});

但这会在控制台中出错：

未捕获的TypeError：el.addEventListener不是函数在makeGrid（designs.js：34） at designs.js：42

Answer 1

getElementsByTagName()返回集合。您必须迭代所有元素以添加事件：

尝试使用querySelectorAll()和forEach()：

const el = document.querySelectorAll('td');
el.forEach(function(td){
  td.addEventListener("click", function(){
    let cellColor = document.getElementById("colorPicker").value;
    this.style.backgroundColor = cellColor;
  });
});

请注意：所有现代浏览器均支持 querySelectorAll()。一些旧的浏览器不支持它。

如果您想使用旧版浏览器，请尝试使用以下Array.prototype.forEach()：

const el = document.getElementsByTagName('td');
[].forEach.call(el, function(td){
  td.addEventListener("click", function(){
    let cellColor = document.getElementById("colorPicker").value;
    this.style.backgroundColor = cellColor;
  });
});

Cell Color: <input id="colorPicker" value="#FF5733"/>
<table>
  <tbody>
    <tr><td>11</td><td>12</td><td>13</td></tr>
    <tr><td>21</td><td>22</td><td>23</td></tr>
    <tr><td>31</td><td>32</td><td>33</td></tr>
  </tbody>
</table>

Answer 2

el是一个nodeList＆amp;它不会有任何addEventListener方法。首先转换为数组并使用forEach访问此列表中的每个元素。然后将addEventListener附加到每个元素

const el = document.getElementsByTagName('td');
[].slice.call(el).forEach(function(item){
  item.addEventListener("click", function(){

    let cellColor = document.getElementById("colorPicker").value;
    this.backgroundColor = cellColor;
  });

})

Answer 3

您需要遍历el，以便我们可以为el中的每个元素添加侦听器。此外，要正确组织代码，您可以分离出侦听器功能。

const el = document.getElementsByTagName('td');
for(var i=0; i<el.length; i++){
  el[i].addEventListener("click", clickFunction);
}
//listener function
function clickFunction(){
    let cellColor = document.getElementById("colorPicker").value;
    this.backgroundColor = cellColor;
}

如何使用JS

3 个答案: