728x90
반응형
1. 이벤트 위임
// 이벤트 위임
// 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우,
// 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용 가능
const parentEl = document.querySelector('.parent')
const childEls = document.querySelectorAll('.child')
// 모든 대상 요소에 이벤트 등록
// nodelist는 foreach 사용 가능
// childEls.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)
}
})
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" defer src="main.js"></script>
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
2. 마우스와 포인터 이벤트
// 마우스와 포인터 이벤트
// click, dbclick, mousedown(버튼 누를때), mouseup
// mousecenter, mouseleave, mousemove
// contextmenu(우클릭), wheel
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
// childEl.addEventListener('click', ()=>{
// childEl.classList.toggle('active')
// })
// childEl.addEventListener('mousedown', ()=>{
// childEl.classList.add('active')
// })
// childEl.addEventListener('mouseup', ()=>{
// childEl.classList.remove('active')
// })
// childEl.addEventListener('mouseenter', ()=>{
// childEl.classList.add('active')
// })
// childEl.addEventListener('mouseleave', ()=>{
// childEl.classList.remove('active')
// })
// childEl.addEventListener('mousemove', (event)=>{
// console.log(event.offsetX, event.offsetY)
// })
childEl.addEventListener('contextmenu', (event)=>{
console.log(event)
})
3. 키보드 이벤트
// keyboard events
// keydown 키를 누를 때
// keyup 키를 땔 때
const inputEl = document.querySelector('input')
// inputEl.addEventListener('keyup', event => {
// console.log(event.key)
// })
inputEl.addEventListener('keydown', event => {
// 한글, enter 같은 경우, iscomposing 속성 필수
if(event.key === 'Enter' && !event.isComposing){
// cjk 문자를 처리하는 과정인지를 불린데이터로 가지고 있는 속성
// cjk 문자(중국어, 한국어, 일본어)는 브라우저에서 처리하는 과정이 한단계 더 필요
console.log(event.isComposing)
console.log(event.target.value)
}
})
4. form 및 focus 이벤트
// 포커스 & 폼 이벤트
// focus 요소가 포커스를 얻었을 때
// blur 요소가 포커스를 잃었을 때
// input 값이 변경되었을 때
// change 상태가 변경되었을 때 // tap키, enter키
// 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 => {
// form 요소는 submit 이벤트가 발생되면 페이지를 새로고침하는게 기본동작
// preventdefault를 추가하면 새로고침 안됨
event.preventDefault()
const data = {
id : event.target[0].value,
pw : event.target[1].value
}
console.log('제출!', data)
})
formEl.addEventListener('reset', event=>{
console.log('리셋')
})
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" defer src="main.js"></script>
<style>
form {
padding: 10px;
border: 4px soid transparent;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
form.active {
border-color: orange;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="id">
<input type="password" placeholder="pw">
<button type="submit" >제출</button>
<button type="reset">초기화</button>
</form>
</body>
</html>
5. 커스텀 이벤트
// 커스텀 이벤트와 디스패치
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!')
// })
// 예제2
child1.addEventListener('hello-world', event=>{
console.log('커스텀 이벤트 발생')
console.log(event.detail)
})
child2.addEventListener('click', ()=>{
// js에 존재하지 않는 커스텀 이벤트를 만들어서 언제든지 이벤트의 생성자 함수로 실행할 수 있는데
// 특정 데이터를 전달하고 싶으면 두 번째 인수로 객체 데이터를 추가하고, detail 속성에 js 데이터 추가 가능
child1.dispatchEvent(new CustomEvent('hello-world', {
detail: 123
}))
})
728x90
반응형
'JS, TS' 카테고리의 다른 글
| [JS] 심화 학습 (0) | 2024.01.15 |
|---|---|
| [JS] 기타 Web APIs (1) | 2024.01.15 |
| [JS] 이벤트 1 (0) | 2024.01.15 |
| [JS] DOM (1) | 2024.01.14 |
| [JS] 동기/비동기 (1) | 2024.01.14 |
