为何input的change事件监听器仅在手动勾选单选框时触发？

我无法理解为何为input绑定的addEventListener的change事件仅在手动勾选radio input时才执行。

理论上，每次radio按钮被勾选时都应触发该event，但通过javascript（无论是click还是onkeydown方式）勾选时，事件却不会响应。

如何让javascript无论通过何种方式勾选radio，都能触发addEventListener的change事件？

要在控制台输出日志，可执行以下操作：

• 按下1或2键 (javascript不会识别单选框已被勾选)
• 点击文本内容 (javascript不会识别单选框已被勾选)
• 点击单选框

<div id="div"> Click radio, click this sentence or (Press 1 or 2) to log </div>
<input type="radio" name="a" id="input1"/>
<input type="radio" name="a" id="input2"/>

#div {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  margin: 10px 0;
  user-select: none;
}

let input1 = document.getElementById("input1")
let input2 = document.getElementById("input2")
let div = document.getElementById("div")

//Listens for keypress and checkes one of the radios
document.onkeydown = function (e) {
  if (e.key==="1") {input1.checked = true;}
  if (e.key==="2") {input2.checked = true;}
}

//Listens for sentence click and checkes one of the radios
div.addEventListener ("click", function () {
  if (input1.checked){input2.checked = true;}
  else {input1.checked = true;}
})

//When ever inputs are checked
input1.addEventListener ("change", function () {
  console.log("Radio1 was checked")
})
input2.addEventListener ("change", function () {
  console.log("Radio2 was checked")
})

这是个很常见的小坑，我来帮你理清楚原因和解决办法～

问题的核心在于：当你通过JavaScript直接修改checked属性时，浏览器不会自动触发change事件——这个事件默认只在用户手动交互（比如点击单选框、用键盘切换选择）时才会被触发。

要解决这个问题，我们只需要在通过JS修改checked属性后，手动触发change事件即可。下面是修改后的完整代码：

let input1 = document.getElementById("input1")
let input2 = document.getElementById("input2")
let div = document.getElementById("div")

//Listens for keypress and checks one of the radios
document.onkeydown = function (e) {
  if (e.key === "1") {
    input1.checked = true;
    // 手动触发change事件
    input1.dispatchEvent(new Event('change'));
  }
  if (e.key === "2") {
    input2.checked = true;
    // 手动触发change事件
    input2.dispatchEvent(new Event('change'));
  }
}

//Listens for sentence click and checks one of the radios
div.addEventListener ("click", function () {
  if (input1.checked) {
    input2.checked = true;
    input2.dispatchEvent(new Event('change'));
  } else {
    input1.checked = true;
    input1.dispatchEvent(new Event('change'));
  }
})

//When ever inputs are checked
input1.addEventListener ("change", function () {
  console.log("Radio1 was checked")
})
input2.addEventListener ("change", function () {
  console.log("Radio2 was checked")
})

原理说明 #

我们用new Event('change')创建了一个标准的change事件对象，然后通过元素的dispatchEvent方法将这个事件派发给对应的radio按钮，这样就能模拟出和用户手动勾选时一样的事件触发效果。

现在你再测试一下：按下1/2键、点击文本内容，控制台都会正常输出对应的日志啦～

内容的提问来源于stack exchange，提问作者Monwell Partee