[ JS ] JavaScript EVENT

메이·2024년 5월 1일

목록 보기

9/12

📖 EVENT (Document Object Model)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="./event.js"></script>
    <title>Document</title>
    <style>
      .parent {
        width: 400px;
        height: 200px;
        margin: 40px;
        padding: 20px;
        border: 5px solid;
        background-color: red;
        overflow: auto;
      }
      .child {
        width: 300px;
        height: 100px;
        margin-bottom: 20px;
        border: 5px solid;
        background-color: orange;
        font-size: 40px;
      }
    </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      <a href="http://apple.com" target="_blank">사과</a>
    </div>
    <div class="child">
      <a href="http://google.com" target="_blank">바나나</a>
    </div>
    <div class="child">
      <a href="http://heropy.dev" target="_blank">체리</a>
    </div>
  </div>
</body>
</html>

01. 이벤트 추가 및 제거

.addEventListener

대상.addEventListener(이벤트종류, 핸들러) : 대상에서 청취(Listen)할 이벤트 종류와 이벤트가 발생했을 때 호출할 콜백(Handler)

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

parentEl.addEventListener('click', () => {
    console.log('Parent!')
})

childEl.addEventListener('click', () => {
    console.log('Child!')
})

.removeEventListener

대상.removeEventListener(이벤트종류, 핸들러) : 대상에 등록했던 이벤트 핸들러를 제거한다.
제거하려면 이름을 가진 기명함수를 꼭 콜백함수로 사용해야한다.

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

const handler = () => {
    console.log('Parent!')
}

parentEl.addEventListener('click', handler)
childEl.addEventListener('click', () => {
    parentEl.removeEventListener('click', handler)
})

02. 이벤트 객체

.addEventListener() 핸들러의 첫 매개변수로, 발생한 이벤트의 정보를 가진 객체를 전달한다.

const parentEl = document.querySelector('.parent')

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

const inputEl = document.querySelector('input')
inputEl.addEventListener('keydown', event => {
    console.log(event.key)
    console.log(inputEl.value)
    console.log(event.target.value)
})

03. 이벤트 기본 동작 방지

event.preventDefalut( )

: 이벤트의 기본 동작을 방지한다.

// <a> 태그에서 페이지 이동 방지!
const anchorEl = document.querySelector('a')
anchorEl.addEventListener('click', event => {
  event.preventDefault()
  console.log('Click!')
})

// 마우스 휠의 스크롤 동작 방지!
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('wheel', event => {
  event.preventDefault()
})

04. 이벤트 버블링

event.stopPropagation( )

: 하위 요소에서 상위 요소로의 이벤트 전파(버블)를 정지한다.

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const anchorEl = document.querySelector('a')


window.addEventListener('click', () => {
  console.log('Window!')
})
document.documentElement.addEventListener('click', () => {
  console.log('HTML!')
})
document.body.addEventListener('click', () => {
  console.log('Body!')
})
parentEl.addEventListener('click', (event) => {
  console.log('Parent!')
  event.stopPropagation() //버블링 정지
})
childEl.addEventListener('click', () => {
  console.log('Child!')
})
anchorEl.addEventListener('click', (event) => {
  console.log('Anchor!')
  event.preventDefault()
})

Anchor!
Child!
Parent!
(사과를 누르면)

05. 이벤트 캡처링

{ capture: true }

: 이벤트 캡처를 활성화한다.
: 캡처된 요소는 맨 위로 옮겨짐

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const anchorEl = document.querySelector('a')


window.addEventListener('click', () => {
  console.log('Window!')
})
document.documentElement.addEventListener('click', () => {
  console.log('HTML!')
})
document.body.addEventListener('click', () => {
  console.log('Body!')
}, {
  capture: true
})
parentEl.addEventListener('click', () => {
  console.log('Parent!')
}, {
  capture: true
})
childEl.addEventListener('click', () => {
  console.log('Child!')
})
anchorEl.addEventListener('click', (event) => {
  console.log('Anchor!')
  event.preventDefault()
})

Body!
Parent!
Anchor!
Child!
HTML!
Window!
(사과부분을 누르면)

06. 한글 입력 이벤트 중복

event.isComposing

: 브라우저 입력기의 CJK 문자 구성 중에는 이벤트 핸들러가 2번 실행될 수 있다.
: 한글 입력 중인지 여부를 확인한다.

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown', event => {
  if (event.isComposing) return
  if (event.key === 'Enter') {
    const h1El = document.createElement('h1')
    h1El.textContent = inputEl.value
    document.body.append(h1El)
  }
})

07. 마우스와 포인터 이벤트

const parentEl = document.querySelector('.parent')
const childEls = document.querySelectorAll('.child')

childEls.forEach(childEl => {
  // click - 클릭했을 때
  // dblclick - 더블 클릭했을 때
  childEl.addEventListener('click', () => {
    childEl.classList.toggle('active')
  })

  // contextmenu - 우클릭했을 때
  childEl.addEventListener('contextmenu', event => {
    event.preventDefault()
    console.log(childEl.textContent)
  })
})