<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<input type="text"></input>
<script>
let text = document.querySelector('input');
const eventAwesome = new CustomEvent('awesome', {
bubbles: true,
detail: {
text: () => text.value
}
});
text.addEventListener('awesome', e => alert(e.detail.text()));
text.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
</script>
</body>
</html>