JavaScript

Browser Events

<section>
  <div>Element Name</div>
  <h2>Coding <span>❤️</span></h2>
  <p>There are many languages out there, each with its own proponents: </p>
  <ul>
    <li>JavaScript</li>
    <li>Ruby</li>
    <li>Python</li>
  </ul>
  <a href="#">This link doesn't go anywhere.</a>
</section>

section {
  font-family: Helvetica;
}

div {
  background-color: goldenrod;
  display: inline-block;
  font-weight: 700;
  color: snow;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
}


document.querySelector('section').dispatchEvent(new MouseEvent('mouseover', {}));



let favLanguage = document.querySelector("section");
let elem = document.querySelector("div");
favLanguage.addEventListener("mouseover", (event) => {
  elem.textContent = event.target.tagName;
});
