<div class="container">
  <div class='speech-bubble'>Privet!!! Menya zovut E.type! Nazdoroviye!!</div>
  <div class="actor">
    <button id=button>click me</button>:
    <input id=e-type><br>
    <textarea id=input-event>
      ^^paste text in input^^
    </textarea>
  </div>
</div>

From <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener() documentation on MDN</a>
<div class="section-content">
  <dl>

    <dt id="listener"><code>listener</code></dt>
    <dd>
      <p>
        The object that receives a notification (an object that implements the
        <a target="_blank" href="https://developer.mozilla.org//en-US/docs/Web/API/Event"><code>Event</code></a> interface) when an event of the specified type occurs. This must
        be an <mark>object with a <code>handleEvent()</code> method</mark>, or a JavaScript
        <a target="_blank" href="https://developer.mozilla.org//en-US/docs/Web/JavaScript/Guide/Functions">function</a>. See
        <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback">The event listener callback</a> for details on the callback itself.
      </p>
    </dd>
  </dl>
</div>
body {
  background: #ffc76047;
}
.container {
  position: relative;
  perspective: 125em;
  margin: 30px auto;
  width: 300px;
}
.actor {
  margin-top: 35px;
}
textarea {
  height: 100px;
  width: 245px;
  margin: 10px 0;
}
.speech-bubble {
  position: relative;

  padding: 1em;
  width: 15em;
  height: 4em;
  border-radius: 50%;
  transform: rotate(-4deg) rotateY(15deg);
  background: #629bdd;
  font: 1em/2 Century Gothic, Verdana, sans-serif;
  text-align: center;
}
.speech-bubble:before,
.speech-bubble:after {
  position: absolute;
  z-index: -1;
  content: "";
}
.speech-bubble:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(0.35em, -0.15em) scale(1.02);
  background: #f4fbfe;
}
.speech-bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe;
  border-bottom: solid 0.25em #629bdd;
  bottom: 0.65em;
  left: 1.55em;
  width: 0;
  height: 1em;
  transform: rotate(45deg) skewX(75deg);
}

var input = document.getElementById("e-type");
var button = document.getElementById("button");
var textarea = document.getElementById("input-event");
handler = {
  handleEvent(E) {

    if ((E.type = "mousedown")) {
      E.preventDefault();
      E.stopPropagation()
      input.value = "prevent"
    }
    textarea.value = JSON.stringify(E)
    input.value = E.type;
  }
};
inputHandler = {
  handleEvent(E) {
    const oldText = textarea.value;
    textarea.value = oldText + E.type + "\n";
  }
};
input.addEventListener("input", inputHandler);
input.addEventListener("focus", inputHandler);
input.addEventListener("blur", inputHandler);
input.addEventListener("paste", inputHandler);

button.addEventListener("focus", handler);
button.addEventListener("blur", handler);
button.addEventListener("mousedown", handler);
button.addEventListener("mouseup", handler);
button.addEventListener("click", handler);
button.addEventListener("mouseenter", handler);
button.addEventListener("mouseleave", handler);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.