Click Me

Events: What just happened?

        
const clickMe = document.querySelector('#click-me')
const message = document.querySelector('#message')
const box = document.querySelector('#box')
const inputText = document.querySelector('#input-text')

clickMe.addEventListener('mouseover', (e) => {
  message.innerHTML = 'button "mouseover"'
})

clickMe.addEventListener('mouseout', (e) => {
  message.innerHTML = 'button "mouseout"'
})

clickMe.addEventListener('click', (e) => {
  message.innerHTML = 'button "click"'
})

box.addEventListener('mousemove', (e) => {
  message.innerHTML = `box "mousemove" clientX:${e.clientX} clientY:${e.clientY}`
})

inputText.addEventListener('focus', (e) => {
  message.innerHTML = 'input "focus"'
})

inputText.addEventListener('input', (e) => {
  message.innerHTML = `input "input": ${e.target.value}`
})

window.addEventListener('resize', (e) => {
  message.innerHTML = `window "resize" width:${window.innerWidth} height:${window.innerHeight}`
})