<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Document</
title
>
integrity
=
"sha256-sCexhaKpAfuqulKjtSY7V9H7QT0TCN90H+Y5NlmqOUE="
crossorigin
=
"anonymous"
>
</
script
>
<
style
>
h1 {
color: green;
}
.display {
border: 2px solid black;
height: 100px;
width: 400px;
text-align: center;
}
.input {
display: flex;
flex-direction: column;
font-size: 0px;
}
button {
border: none;
margin: 2px;
width: 80px;
height: 3vw;
float: right;
background-color: green;
color: white;
}
button:hover {
background-color: rgb(5, 94, 12);
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
div
class
=
"display"
><
h3
></
h3
></
div
>
<
div
class
=
"input"
>
<
button
>emit event</
button
>
</
div
>
<
script
type
=
"text/javascript"
>
window.addEventListener("load", () => {
document.querySelector("button").addEventListener("click", () => {
document.dispatchEvent(new KeyboardEvent("keypress", { key: "H" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "y" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: " " }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "G" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "k" }));
});
});
document.addEventListener("keypress", (event) => {
document.querySelector("h3").innerHTML += event.key;
});
</
script
>
</
body
>
</
html
>