Как правильно задать addEventListener?

Question

[just_clarity]

Генерирую чекбоксы по нажатию кнопки так.
Как правильно задать addEventListener чтобы получать value нажатого чекбокса?

function loadsett() {
    var data = httpGet("api?action=sett")
    var json_answer = JSON.parse(data);
    //console.log(json_answer);
    var settParent = document.getElementById('sett');
    for (let index = 0; index < json_answer.data.length; ++index) {
        const element = json_answer.data[index];
        console.log(element);

        var label = document.createElement('label');
        label.setAttribute("class", "form-check");
        settParent.appendChild(label);

        var newCheckBox = document.createElement('input');
        newCheckBox.type = 'checkbox';
        newCheckBox.id = 'settid' + index;
        newCheckBox.value = json_answer.data[index].id;
        newCheckBox.name = "firstChecks[]";
        newCheckBox.setAttribute("class", "form-check-input");
        label.appendChild(newCheckBox);

        var labelspan = document.createElement('span');
        labelspan.setAttribute("class", "form-check-label");
        labelspan.appendChild(document.createTextNode(json_answer.data[index].tex1 + " " + json_answer.data[index].tex2));
        label.appendChild(labelspan);
        
        var elem = document.getElementById(newCheckBox.id).addEventListener('change', function() {
            console.log(elem);
        });

    }
}

Answer 1

[Сергей Соколов]

Когда элементы создаются-добавляются динамически, удобно использовать делегирование событий:
слушать клики не на самих чекбоксах, а выше, на общем родителе, на этом settParent.

Тогда не нужно вешать слушателя на каждый новый чекбокс.

settParent.addEventListener('input', ({ target }) => console.log(target.value));