javascript - 标签上的单击事件未触发(类不会更改)

Question

标签内有一个复选框。我在标签中添加了点击事件的事件监听器，以便触发类。

当我点击复选框时它确实有效。

但是，如果我单击标签，则没有任何变化。为什么会这样，考虑到事件绑定(bind)到标签而不是复选框？

const formCheck = document.querySelector('.drinos-checker')

formCheck.addEventListener('click', function () {
    formCheck.classList.toggle('checkerActive')
})

.checkerActive {
  background-color: red;
}

   <label class="drinos-checker"><input class="drinos-checkbox" type="checkbox" name="checkbox" value="value">Renovation</label>

Answer 1

不要将点击事件添加到label，而是将其添加到input元素-

const formCheck = document.querySelector('.drinos-checker');
const inputCheck = document.querySelector('input');

inputCheck.addEventListener('click', function() {
  formCheck.classList.toggle('checkerActive')
})

.checkerActive {
  background-color: red;
}

<label class="drinos-checker"><input class="drinos-checkbox" type="checkbox" name="checkbox" value="value">Renovation</label>