1️⃣ 이벤트와 이벤트 리스너
이벤트 Event 객체란 DOM 내에 위치한 이벤트를 나타내며, 사용자가 현재 취한 액션에 대한 정보를 갖고 있다.
이벤트 리스너 란 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
DOM객체.addEventListener(이벤트명, 실행할 함수명, 옵션)- 이벤트명: JavaScript에서 발생할 수 있는 이벤트 명을 입력
- 함수명: 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수명을 입력한다.
- 옵션: 옵션은 생략 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
버튼에 대해 클릭 이벤트 핸들러를 등록하는 예시이다.
const btn = document.createElement('button')
btn.textContent = 'click me';
document.body.appendChild(btn);
btn.addEventListener('click', function() {
alert('clicked button')
});2️⃣ 다양한 이벤트
1. 마우스 이벤트
click: 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생dbclick: 요소 위에서 마우스 왼쪽 버튼을 두번 클릭했을 때 발생contextmenu: 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생mouseover: 마우스 커서를 요소 위로 움직였을 때 발생mouseout: 마우스 커서가 요소 밖으로 움직였을 때 발생mousedown: 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때 발생mouseup: 요소 위에서 눌렀던 마우스 버튼을 뗄 때 발생mousemove: 마우스를 움직일 때 발생
2. 폼 요소 이벤트
input: 사용자가 값을 수정할 때마다 발생change: 요소 변경이 끝나면 발생submit: 사용자가<form>을 제출할 때 발생합니다.focus: 사용자가<input>과 같은 요소에 포커스 할 때 발생합니다.cut: 사용자가 값을 잘라내기 할 때 발생copy: 사용자가 값을 복사하기 할 때 발생paste: 사용자가 값을 붙여넣기 할 때 발생select: 텍스트를 선택했을 때 발생
3. 키보드 이벤트
keydown: 사용자가 키보드 버튼을 눌렀을 때 발생keyup: 사용자가 키보드 버튼을 뗄 때 발생합니다.
4. 문서 이벤트
DOMContentLoaded: HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생합니다.
5. CSS 이벤트
transitionend: CSS 애니메이션이 종료되었을 때 발생합니다.
3️⃣ 이벤트 리스너 삭제
이벤트 리스너의 경우, 웹 어플리케이션 메모리 누수의 원인이 될 수 있다.
더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너를 삭제해야한다.
또한, 하나의 이벤트의 복수의 핸들러를 할당할 수 없는데 이 문제를 해결하기 위해 addEventListener와 removeEventListener를 적절히 사용하면 된다.
DOM객체.removeEventListener(이벤트명, 실행했던 함수명);4️⃣ 이벤트의 기본 동작 막기
event.preventDefault(): 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정한다. 예를 들어, 체크박스를 클릭하면 체크가 되어야 하는게기본 동작인데event.preventDefault()로 해당 기본 동작을 막을 수 있다.
evnet.stopPropagation(): 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지한다. → 추가 설명은 다음 수업 듣고 추가하겠습니다
