Question

 <div>test</div>
 <div>test</div>
 <div>test</div>

如果我有一个div列表，并且希望在单击每个div时将字体大小增加到20px，我知道我可以执行以下操作：

let elements = document.querySelectorAll('div');

for (var x = 0; x < elements.length; x++) {
  elements[x].addEventListener('click', () => {event.target.style.fontSize = "20px"}
}

是否有一种遍历侦听并添加onclick的方法，而不是使用addEventListener的方法呢？此外，如果有， if 是否是首选？

Answer 1

您必须遍历所有元素。您可以按以下方式使用onclick：

let elements = document.querySelectorAll('div');
for (var x = 0; x < elements.length; x++) {
  elements[x].onclick = function(){
    this.style.fontSize = "20px";
  }
};

<div>test</div>
<div>test</div>
<div>test</div>

有关差异，请参见addEventListener vs onclick。

Answer 2

您可以在CSS类中定义字体大小，然后将这些类添加到所有div中。单击时，只需更新CSS类的字体大小javascript。 <<编辑：CSS更新可能需要循环..！ >>

您可以参考以下教程

http://www.shawnolson.net/a/503/altering_css_class_attributes_with_javascript.html

希望有帮助。

Answer 3

如果您不想循环播放，请检查页面是否单击，然后查看事件的目标（被单击的事物）：

document.addEventListener("click", function(e) {
  if (e.target.tagName == "DIV") {
    e.target.style.fontSize = "20px";
  }
})

<div>test</div>
<div>test</div>
<div>test</div>

JS：遍历div列表以通过onclick添加事件？

3 个答案: