Question

我有一个点击事件处理程序。它处理外部div的点击。在外部div内部是多个div，每个div具有不同的背景样式。我想提醒那个点击样式的特定div的背景颜色。这是我的代码

document.getElementById("buttonBox").onclick = function() {
  alert(this.target.backgroundColor);
}

<div id='buttonBox'>
  Background:
  <div class='btns' style='background-color: orange'>A</div>
  <div class='btns' style='background-color: blue'>B</div>
  <div class='btns' style='background-color: green'>C</div>
  <div class='btns' style='background-color: black'>D</div>
  <div class='btns' style='background-color: yellow'>E</div>
</div>

以下是小提琴的链接：https://jsfiddle.net/ymcuxgpz/

有没有办法可以显示单击处理程序单击的内部div的背景？例如，如果我单击“A”div，警告框将显示“orange”？

Answer 1

document.getElementById("buttonBox").onclick = function(e) {
   alert(e.target.style.backgroundColor);
}

你很亲密。这可以通过事件委派来实现。对事件委托进行谷歌搜索，你会发现很多材料来涵盖这一点。这样您就不必将事件侦听器附加到每个元素。

Answer 2

var btns = document.querySelectorAll('.btns');

btns.forEach(function(btn,i){
  btn.addEventListener('click',function(){
  	alert(this.style.backgroundColor);
  });
});

<div id='buttonBox'>
  Background:
  <div class='btns' style='background-color: orange'>A</div>
  <div class='btns' style='background-color: blue'>B</div>
  <div class='btns' style='background-color: green'>C</div>
  <div class='btns' style='background-color: black'>D</div>
  <div class='btns' style='background-color: yellow'>E</div>
</div>

使用一个事件处理程序获取内部div的背景

2 个答案: