1つのイベントハンドラで内部divの背景を取得する

Question

私は1つのクリックイベントハンドラを持っています。外側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); 
} 

あなたが近くにあります。これは、イベントの委任によって可能です。イベントの委任に関するGoogleの検索を行い、あなたはこれをカバーする多くの資料を見つけるでしょう。この方法では、各要素にイベントリスナーをアタッチする必要はありません。

Answer 2

var btns = document.querySelectorAll('.btns'); 
 

 
btns.forEach(function(btn,i){ 
 
    btn.addEventListener('click',function(){ 
 
    \t 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>