如何在目标的兄弟姐妹上触发事件

Question

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

我的要求是当我点击 span 时，输入复选框 onchanange 处理程序应该调用输入事件对象。

请找到下面的代码片段以及我给 codepen url 的示例。

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.
}

示例 URL：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>

代码笔：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 and for initializing an event here。

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

Answer 3

除非你想做一些你的 question/example 中不清楚的事情，如果你想要的只是有一个标签来触发复选框的事件并让它可以访问，那么你应该使用 label 元素。有两种方法可以只使用 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">

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

https://codepen.io/jerred121/pen/dyXrGmB?editors=1010

如何在目标的兄弟姐妹上触发事件

How to trigger event on target's sibling

javascript

user-interface

w3c

frontend

复选框辅助功能需要