JSでクリックして挿入された要素に対し、さらにクリックイベントを定義したい

[code]

    var button = document.getElementById('button'),
        list = document.getElementById('list');
    
    button.addEventListener('click', function() {
      list.insertAdjacentHTML('beforeend', '<li>リスト</li>');
    });
    
    // #list > li をクリックしたらそのliの背景色をたとえば赤色にしたい
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

このようにボタンをクリックするとリストが追加されていきます。その追加されたリストがクリックされたらそのリスト(li)の背景色を赤色にしたい場合、どのように記述すればよいでしょうか？




親要素にclickイベントを定義すれば、li要素を追加する度にイベント定義せずとも済みます。  
element.style.backgroundCololr で背景色を変える方法はHTML/CSSの役割的によろしくない為、class属性やaria-
selected属性を使用する事を推奨します。  
また、color, background-color はセットで指定する事が推奨されています。

  * [aria-selected - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳](https://momdo.github.io/wai-aria-1.1/#aria-selected)
  * [アクセシビリティガイドライン > 33. CSSで文字の色や背景色や背景画像を指定する場合... ： 三井住友銀行](http://www.smbc.co.jp/accessibility/guidelines/guideline_33.html)

[code]

    'use strict';
    document.getElementById('button').addEventListener('click', function handleAddLi (event) {
      document.getElementById('list').insertAdjacentHTML('beforeend', '<li>リスト</li>');
    }, false);
    
    document.getElementById('list').addEventListener('click', function handleSelected (event) {
      var li = event.target;
    
      if (li.tagName === 'LI') {
        li.setAttribute('aria-selected', 'true');
      }
    }, false);
[/code]

[code]

    #list>[aria-selected="true"] {
      color: black;
      background-color: red;
    }
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

Re: qsmq さん




親要素にclickイベントを定義すれば、li要素を追加する度にイベント定義せずとも済みます。  
element.style.backgroundCololr で背景色を変える方法はHTML/CSSの役割的によろしくない為、class属性やaria-
selected属性を使用する事を推奨します。  
また、color, background-color はセットで指定する事が推奨されています。

  * [aria-selected - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳](https://momdo.github.io/wai-aria-1.1/#aria-selected)
  * [アクセシビリティガイドライン > 33. CSSで文字の色や背景色や背景画像を指定する場合... ： 三井住友銀行](http://www.smbc.co.jp/accessibility/guidelines/guideline_33.html)

[code]

    'use strict';
    document.getElementById('button').addEventListener('click', function handleAddLi (event) {
      document.getElementById('list').insertAdjacentHTML('beforeend', '<li>リスト</li>');
    }, false);
    
    document.getElementById('list').addEventListener('click', function handleSelected (event) {
      var li = event.target;
    
      if (li.tagName === 'LI') {
        li.setAttribute('aria-selected', 'true');
      }
    }, false);
[/code]

[code]

    #list>[aria-selected="true"] {
      color: black;
      background-color: red;
    }
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

Re: qsmq さん

