이벤트
- 특정한 상황에 따라 원하는 동작을 실행시킬 수 있는 기능입니다.
- 클릭, 키다운, 드래그 등의 다양한 이벤트를 설정할 수 있습니다.
이벤트 등록/제거
addEventListener
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
parentEl.addEventListener('click', ()=>{
console.log('Parent')
})
childEl.addEventListener('click',()=>{
console.log('Child')
})
- 이벤트를 등록하면서, 발생한 이벤트의 정보를 가진 객체를 전달합니다.
- addEventListener( 이벤트종류, 콜백함수 ) 으로 구성됩니다.
- 이벤트 종류는 아래 링크에서 확인할 수 있습니다.
https://www.w3schools.com/jsref/dom_obj_event.asp
- 이벤트에 사용되는 콜백 함수를 '핸들러' 라고 합니다.
- 이 코드대로라면 child 클래스를 눌러도 parent 이벤트가 같이 출력되는데, 이는 이벤트 버블링 때문입니다.
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)
})
- addEventListener로 등록된 이벤트를 제거합니다.
- removeEventListener( 이벤트 종류, 핸들러의 이름 )으로 사용합니다
- 익명함수로 사용시 remove를 할 수 없으므로 핸들러를 기명함수로 사용해야 합니다.
- 제거 이후에는 이벤트가 발생하지 않습니다.
이벤트 객체
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('click', event =>{
console.log(parentEl)
console.log(event.target)
})
- 발생한 이벤트의 정보를 가진 객체입니다.
- 이벤트의 대상, 마우스 클릭 위치, 시간 등 다양한 정보를 가지고 있습니다.
Ex) event.target은 이벤트 대상이 되는 객체의 값을 반환합니다.
이벤트 기본 동작 방지
const anchorEl = document.querySelector('a')
anchorEl.addEventListener('click', event =>{
event.preventDefault()
})
parentEl.addEventListener('wheel', event=>{
event.preventDefault()
})
- a 태그 클릭시 페이지 이동 기능 등을 기본동작 이라고 합니다..
- preventDefault() 를 사용하여 기본 동작을 방지할 수 있습니다.
마우스 이벤트
포인터 이벤트 - contextmenu, click
childEl.addEventListener('click', ()=>{
childEl.classList.toggle('active')
})
childEl.addEventListener('contextmenu', ()=>{
event.preventDefault()
console.log(childEl.textContent)
})
parentEl.addEventListener('mousedown', ()=>{
parentEl.classList.add('active')
})
parentEl.addEventListener('mouseup', ()=>{
parentEl.classList.remove('active')
})
parentEl.addEventListener('mousemove', ()=>{
console.log(event.x, event.y)
})
parentEl.addEventListener('wheel', ()=>{
console.log('Parent Wheel')
})
- 클릭 이벤트
1) click : 마우스 버튼을 클릭했을때 발생합니다.
2) dbclick : 마우스 버튼을 더블클릭했을때 발생합니다.
3) contextmenu : 마우스 오른쪽 버튼을 클릭했을때 발생합니다.
4) mousedown : 마우스 버튼을 누를때 발생합니다.
5) mouseup : 마우스 버튼을 뗄 때 발생합니다.
- 마우스 커서 이벤트
1) mouseenter : 포인터가 요소로 들어갈때 발생합니다.
2) mouseleave : 포인터가 요소에서 나올 때 발생합니다.
3) mousemove : 마우스 포인터가 움직일 때 발생합니다.
- 마우스 휠 이벤트
1) wheel : 휠 버튼이 회전할 때 발생합니다.
키보드 이벤트
keydown & keyup
const inputEl = document.querySelector('input')
inputEl.addEventListener('keydown', event=>{
if(event.key === 'Enter'){
console.log('Enter')
}else if (event.key === 'Escape'){
console.log('ESC')
}else{
console.log(event.key)
}
})
inputEl.addEventListener('keyup', event=>{
if(event.key === 'Enter'){
console.log('Enter off')
}else if (event.key === 'Escape'){
console.log('ESC off')
}else{
console.log(event.key + 'off')
}
})
- keydown 은 키를 눌렀을때, keyup은 키를 뗐을때 발생합니다.
- event 객체를 받아 event.key로 어떤 키 버튼을 눌렀는지 확인이 가능합니다.
폼관련 이벤트
inputEls.forEach(el =>{
el.addEventListener('focus', ()=>{
formEl.classList.add('active')
})
el.addEventListener('blur', ()=>{
formEl.classList.remove('active')
})
// 값이 변경되었을때
el.addEventListener('input', event =>{
console.log(event.target.value)
})
// 상태가 변경되었을때
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(모든 값 초기화)
})
- input 이벤트
1) focus : 요소가 포커스 상태일 때 발생하는 이벤트입니다. ( = focusin)
2) blur : 요소에 포커스가 해제될 때 발생하는 이벤트입니다. ( = focusout)
3) input : 인풋 요소에 값이 변경될때 마다 적용되는 이벤트입니다.
4) change : 엔터키를 누르는 등 값이 변경되었거나 포커스해제 등 다양한 상태 변화 시 발생하는 이벤트입니다,
- form 이벤트
1) submit : 폼 요소에서 submit 버튼을 누르는 경우 발생하는 이벤트입니다.
> 기본동작으로 submit 이벤트가 지정되어있으므로 preventDefault() 메서드로 기본동작을 막아야 합니다.
2) reset : 폼 요소에서 reset 버튼을 누르는 경우 발생하는 이벤트입니다.
한글 입력 이벤트 중복 방지
const InputEl = document.querySelector('input')
anchorEl.addEventListener('keydown', event =>{
if(event.isComposing) return // 구성여부를 파악하여 구성중이면 종료
if(event.key === 'Enter'){
const h1El = document.CreateElement('h1')
h1El.textContent = inputEl.value
document.body.append(h1El)
}
})
- 브라우저 입력기(IME)의 CJK(중국어, 일본어, 한국어) 사용시 이벤트 핸들러가 2번 실행될 수 있습니다.
- 이는 문자 구성중에 이벤트가 한번 더 실행되는 문제때문에 생기는것입니다.
- event.isComposing 으로 문자 구성중 여부를 확인하여 함수를 종료시킬 수 있습니다.
'자바스크립트' 카테고리의 다른 글
JavaScript 구조 분해 할당 (0) | 2024.04.23 |
---|---|
JavaScript 이벤트 - 이벤트 전파 (0) | 2024.04.22 |
JavaScript DOM - 크기와 좌표 (0) | 2024.04.22 |
JavaScript DOM - 생성,조회,수정 (2) (0) | 2024.04.20 |
JavaScript DOM - 생성, 조회, 수정 (0) | 2024.04.19 |