[TIL # 24] JS 11일차

Yejin Yang·2022년 5월 10일

TIL

[TIL]

목록 보기

24/67

Event

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다.

이벤트 전파 방향

계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 즉, 이벤트가 전파되는데 전파 방향에 따라 버블링과 캡처링으로 구분할 수 있다.

이벤트 버블링

자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것

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

document.body.addEventListener('click', () => {
	console.log('Body!')
})
childEl.addEventListener('click', () => {
	console.log('Child!')
})
parentEl.addEventListener('click', () => {
	console.log('Parent!')
})
window.addEventListener('click', () => {
	console.log('Window!')
})

콘솔창띄어보면 Child → Parent → Body → Window 순으로 뜬다.
아래에서 위는 → 버블링

document.body.addEventListener('click', () => {
	console.log('Body!')
}), {
	capture: true // 세번째 인수 추가, 내려오는 이벤트 너가 잡아서 너가 써
})

addEventListener 메소드의 세번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 캐치하고 false 또는 미설정하면 버블링으로 전파되는 이벤트를 캐치한다.

이벤트 캡처링

자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것

<body>
	<div class="parent">
    <div class="child">
</body>

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

const yejin = () => {
	console.log('Child!')
}

childEl.addEventListener('click', yejin)
parentEl.addEventListener('click', () => {
	childEl.removeEventListener('click', yejin)
})
window.addEventListener('click', () => {
	console.log('Window!)
})