复选框可访问性需求

Question

我有以下标记和脚本。我有一个以rootnode为id的跨度，它的兄弟是输入复选框。

我的要求是，当我单击跨度时，chanchane处理程序的输入复选框应与输入事件对象一起调用。

请找到下面的代码片段，以及我在示例中提供的Codepen网址。

HTML

复选框可访问性需求

<div>
  <span id="rootnode" role="checkbox" aria-checked="false">
  <span>i am bike</span>
</span>
<input tabindex="-1" type="checkbox" onchange="handleChange()" name="vehicle1" value="Bike">
</div>

JAVASCRIPT

document.getElementById("rootnode").addEventListener('click',this.handleclick);

function handleChange(e) {
  alert(1)
}

function handleclick(e) {
  alert('event fired..');
// how to call onchange handler handleclick with input event object.
}

示例网址：https://codepen.io/anon/pen/ejKqzy?editors=1010

我们非常感谢您的帮助。

谢谢！！！

Answer 1

您可以简单地在处理程序中创建一个事件，然后分派它，就像这样：

document.getElementById("rootnode").addEventListener("click", this.handleclick);

function handleChange(e) {
  alert(1);
}

function handleclick(e) {
  alert("event fired..");
  if ("createEvent" in document) {
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    document.querySelector("input[name=vehicle1]").dispatchEvent(evt);
  } else element.fireEvent("onchange");
}

<div>
  <span id="rootnode" role="checkbox" aria-checked="false">
  <span>i am bike</span>
  </span>
  <input tabindex="-1" type="checkbox" onchange="handleChange()" name="vehicle1" value="Bike">
</div>

CodePen：https://codepen.io/lucakiebel/pen/yqEmXP

Answer 2

您应该手动创建和调度事件：

var event = document.createEvent('Event');
event.initEvent("change", false, true);
var input = document.getElementsByName("vehicle1")[0];
input.dispatchEvent(event);

创建事件和初始化事件here的文档为here。

有关更多信息，您可以访问类似的帖子（可能重复）：How can I trigger an onchange event manually?

Answer 3

除非您要尝试做的事情在您的问题/示例中不清楚，并且如果您只想拥有一个标签来触发该复选框的事件并且可以访问它，那么您应该使用{ {3}}元素。仅使用HTML但不使用JS可以通过两种方式实现此目标：

将标签的for属性设置为复选框的id：

function handleChange(opt) {
  alert(opt)
}

<label for="vehicle1">i am bike</label>
<input tabindex="-1" type="checkbox" onchange="handleChange(1)" id="vehicle1" name="vehicle1" value="Bike">

将复选框包装为标签的子项：

function handleChange(opt) {
  alert(opt)
}

<label for="vehicle1">i am bike</label>
<input tabindex="-1" type="checkbox" onchange="handleChange(1)" id="vehicle1" name="vehicle1" value="Bike">

这两种解决方案都更加标准化和易于使用。

label

如何在目标同级上触发事件

复选框可访问性需求

3 个答案: