Events(7)

Events(7)

마우스와 포인터 이벤트

• 7. 마우스와 포인터 이벤트(Mouse & Pointer Events)
  • click | 클릭했을 때
  • dblclick | 더블 클릭했을 때
  • mousedown | 버튼을 누를 때
  • mouseup | 버튼을 뗄 때
  • mouseenter | 포인터가 요소 위로 들어갈 때
  • mouseleave | 마우스를 요소 밖으로 나올 때
  • mousemove | 포인터가 움직일 때
  • contextmenu| 우클릭했을 때
  • wheel | 휠 버튼이 회전할 때

click

childEl.addEventListener('click', () => {
  childEl.classList.toggle('active')
})

dblclick

childEl.addEventListener('dblclick', () => {
  childEl.classList.toggle('active')
})

mousedown

childEl.addEventListener('mousedown', () => {
  childEl.classList.add('active')
})

mouseup

childEl.addEventListener('mouseup', () => {
  childEl.classList.remove('active')
})

mouseenter

childEl.addEventListener('mouseenter', () => {
  childEl.classList.add('active')
})

mouseleave

childEl.addEventListener('mouseleave', () => {
  childEl.classList.remove('active')
})

mousemove

childEl.addEventListener('mousemove', event => {
  console.log(event)
})

contextmenu

childEl.addEventListener('contextmenu', event => {
  console.log(event)
})

wheel

parentEl.addEventListener('wheel', event => {
  console.log(event)
})