Как передать событие другому елементу?

Question

[Игорь]

Здраствуйте, помогите пожалуйста понять как передать все клавиатурные события нижнему елементу

<div id="handler"tabindex="0"></div>
<div id="target" contenteditable="true"></div>
<style>
#handler{
width:50%;
height:50%;
background:green;
}
#target{
width:50%;
height:50%;
background:grey;
}
</style>
<script>
document.getElementById("handler").addEventListener("keydown", (event) => {
	document.getElementById("target").dispatchEvent(event);
//чтото идет не так...
}, true);
</script>

Тоесть нажимая клавиши над не редактируемым дивом событие должно обрабатыватся на нижнем, редактируемом

Comments

[Вадим]

А зачем?
События нажатия клавиш, насколько я помню, програмно не вызываются в целях безопасности.
Представьте, так бы можно было нажимать всё подряд, не давая пользоваться сайтом.

Объясните задачу, подумаем над решением.

Либо производите необходимые действия в первом обработчике. Зачем передавать их на другой элемент?

Answer 1

[Дмитрий]

Здесь несколько моментов

1) Вам нужно создать новый event, старый уже сдиспатчился и не может быть использован для другого элемента

document.getElementById("target").dispatchEvent(new Event('keydown', { which: event.which }));

Теперь евент будет срабатывать.

2) Если вы хотите чтобы не просто срабатывало событие, а менялся текст, вам придется временно перевести фокус на target и установить курсор в конец текста

const target = document.getElementById("target")
target.focus()
target.selectionStart = target.innerText.length
target.dispatchEvent(
      new Event('keydown', { which: event.which })

)

Но разумнее просто самому менять текст таргета, добавляя полученный символ в конец свойства innerText

target.innerText += event.key

а не генерировать событие