Как вызвать событие на родном брате цели

Question

Как вызвать событие на родном брате цели

1

У меня есть следующая надпись и скрипты. У меня есть пролет с корневым именем в качестве id, и он является флажком ввода.

мое требование - когда я нажимаю на диапазон, флажок ввода onchanange обработчик должен вызывать с объектом события ввода.

просьба найти приведенный ниже фрагмент кода, а также указать код 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.
}

Пример URL: https://codepen.io/anon/pen/ejKqzy?editors=1010

Ваша помощь высоко ценится.

Благодарю вас!!!

Hrusikesh Bunu 04 авг. 2018, в 20:54

Источник

Теги:

javascript

user-interface

frontend

w3c

2 ответа

0

Вы должны создать и отправить событие вручную:

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

Документация для создания события здесь и для инициализации события здесь.

Для получения дополнительной информации вы можете посетить аналогичный пост (возможный дубликат): как я могу инициировать событие onchange вручную?

iiirxs 04 авг. 2018, в 16:46

Ещё вопросы

Luca Kiebel · Accepted Answer · 2018-08-04T16-11-00.000Z

Вы можете просто создать событие в обработчике, а затем отправить его, например:

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