[Javascript] Event

Event 생성과 제거

• .addEventListener() : 대상에 이벤트 청취를 등록. 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출됨
• .removeEventListener() : 메모리 관리를 위해 등록한 이벤트 제거

---

Event 객체

대상에서 발생한 이벤트 정보를 담고 있음

• event.target : 이벤트가 발생한 요소
• event.currentTarget : 이벤트가 등록된 요소

---

기본 동작 방지

event.preventDefault() : 브라우저에서 기본적으로 제공하는 동작을 방지함

 

---

버블링

이벤트 버블링 : 이벤트 전파. 즉, 작은 범위에서 넓은 범위로 이벤트가 전파되는 현상

event.stopPropagation() : 이벤트 전파 방지

 

---

캡처링

이벤트가 버블링되면서 하위 함수부터 각 함수들이 동작될 때 **capture : true**를 명시해줌으로써 먼저 동작되게 하는 것

capture옵션은 더 상위 요소인 것부터 동작됨

parentEl.addEventListener("wheel",event => {
	...
}, {capture : true});

---

이벤트 옵션

1. 핸들러 한 번만 실행
2. parentEl.addEventListener("wheel",()=> { ... }, {once: true});
3. 기본 동작과 핸들러 실행 분리

   parentEl.addEventListener("wheel",()=> {
   	...
   }, {passive: true});
   

4. 만약 핸들러 동작이 무거울때 passive : true 옵션을 걸어줌으로써 실제 화면과는 분리되어 함수가 실행되므로 화면의 동작이 느려지거나 하는 것이 없어짐

---

이벤트 위임(Delegation)

비슷한 패턴의 여러 요소에서 이벤트를 핸들링 해야 하는 경우, 단일 조상 요소에서 제어하는 이벤트 위임 패턴 사용 가능

const parentEl = document.querySelector(".parent");
const childEls = document.querySelectAll(".child");

//child 요소들 모두에게 이벤트를 등록하고 싶을 때 위임을 통해 등록해줌
parentEl.addEventListener("click",event => {
	const childEl = event.target.closest(".child")
	...
}, {passive: true});

---

마우스와 포인터 이벤트

• click: 클릭
• dblclick: 더블 클릭
• mousedown: 버튼 누를 때
• mouseup: 버튼 땔 때
• mouseenter: 포인터가 요소 위로 들어갈 때
• mouseleave: 마우스가 요소 밖으로 나올 때
• mousemove : 포인터가 움직일 때
• contextmenu: 우클릭
• wheel: 휠 회전

 

키보드 이벤트

• keydown: 키 누를 때
• keyup: 키 땔 때

 

포커스 이벤트

• focus: 요소가 포커스를 얻을 때
• blur: 요소가 포커스를 잃었을 때
• input: 값이 변경되었을 때
• change: 상태가 변경되었을 때
• submit: 제출 버튼을 선택했을 때
• reset: 리셋 버튼을 선택했을 때

---

디스패치

요소를 강제로 이벤트 발생시킴

parentEl.addEventListener("click",event => {
	child1.dispatchEvent(new Event('click');
	...
});
child1.addEventListener("click",()=> {
	...
});