이벤트 위임(Delegation)
= 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우,
= 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있습니다.
ex)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelectorAll('.child')
모든 대상 요소에 이벤트 등록!
childEl.forEach(el => {
el.addEventListener('click', event => {
console.log(event.target.textContent)
})
})
조상 요소에 이벤트 위임!
parentEl.addEventListener('click', event => {
const childEl = event.target.closest('.child')
if(childEl) {
console.log(childEl.textContent)
}
})
Mouse & Pointer Events
click = 클릭 했을 때
dblclick = 더블 클릭 했을 때
mousedown = 버튼을 누를 때
mouseenter = 포인터가 요소 위로 들어갈때
mouseup = 버튼을 뗄 때
mouseleave = 마우스를 요소 밖으로 나올 때
mousemove = 포인터가 움직일 때
contextmenu = 우클릭했을 때
wheel = 휠 버튼이 회전할 때
childEl.addEventListener("contextmenu", (event) => {
console.log(event);
});
Keyboard Event
keydown = 키를 누를 때
keyup = 키를 땔 때
const inputEl = document.querySelector('input')
inputEl.addEventListener('keyup', event => {
console.log(event.key)
})
Focus & Form Eventf
focus = 요소가 포커스 얻었을 때
blur = 요소가 포커스를 잃었을 때
input = 값이 변경되었을 때
change = 상태가 변경되었을 때
submit = 제출 버튼을 눌렀을 때
reset = 리세 버튼을 눌렀을 때
const formEl = document.querySelector('form')
const inputEls = document.querySelectorAll('input')
inputEls.forEach(el => {
el.addEventListener('focus', () => {
formEl.classList.add('active')
})
el.addEventListener('blur', () => {
formEl.classList.remove('active')
})
el.addEventListener('change', event => {
console.log(event.target.value)
})
})
formEl.addEventListener('submit', event => {
event.preventDefault()
const data = {
id: event.target[0].value,
pw: event.target[1].value
}
console.log('제출!',data)
})
formEl.addEventListener('reset', event => {
console.log('리셋!')
})
커스텀 이벤트와 디스패치
const child1 = document.querySelector('.child:nth-child(1)')
const child2 = document.querySelector('.child:nth-child(2)')
child1.addEventListener('click', event => {
child2.dispatchEvent(new Event('click'))
child2.dispatchEvent(new Event('wheel'))
child2.dispatchEvent(new Event('keydown'))
})
child2.addEventListener('click', event => {
console.log('Child2 Click!')
})
child2.addEventListener('wheel', event => {
console.log('Child2 wheel!')
})
child2.addEventListener('keydown', event => {
console.log('Child2 keydown!')
})
