[JS] 이벤트 핸들러

이벤트

- 브라우저에서 어떤 일이 일어났음을 알려주는 신호
- 클릭, 키보드 입력, 마우스 이동, 스크롤등의 작업

마우스 이벤트

- click: 해당 element를 클릭(눌렀다 떼기)했을 때 발생
- dbclick: 해당 element를 더블 클릭했을 때 발생
- mousemove: 해당 element에서 마우스를 움직였을 때 발생
- mouseover: 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생
- moustout: 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생
- mousedown: 해당 element에서 마우스 버튼을 눌렀을 때 발생
- mouseup: 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생
- contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생

키보드 이벤트

- keydown: 키가 눌렸을 때 발생
- keyup: 키가 올라갔을 때 발생

폼 이벤트

- focus: 해당 element에 포커스 되었을 때 발생
- blur: 해당 element에서 포커스를 잃을 때 발생
- input: 값을 수정할 때마다 발생
- change: element 변경이 끝나면 발생
- submit: form이 서버로 전송될 때 발생

스크롤 이벤트

- scroll: 스크롤바를 조작하면 발생

문서 로딩 이벤트

- load: HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생
- DOMContentLoaded: 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생
- beforeunload: 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때 발생
- unload: 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

window.addEventListner('load', function(){
  // 코드 작성
});

- 'load' 보다 사용자에게 더 빠르고 정상적인 동작을 제공하기에 DOM 관련 스크립트에서 유리하다

document.addEventListener('DOMContentLoaded', function(){
  // 코드 작성
});

on<event>

- DOM Level 0 방식(비표준)
- HTML 태그에 인라인으로 직접 작성할 수 있다.
- 요소 노드의 on<event\>속성에 이벤트 핸들러를 등록하면 <event\>가 발생했을 때 등록한 핸들러가 호출됨
- `onclick`, `onmousemove`, `onkeydown`등

HTML

- HTML 요소의 `on<event>` 속성의 값으로 이벤트 발생시 실행할 코드를 등록

<button onclick="addContent();console.log('추가 완료');">추가</button>

Script

- `elem.on<event>` 속성에 이벤트 핸들러 추가

<script>
const btn1 = document.querySelector('div > button');
btn1.onclick = function(){
  // 코드 작성
});
</script>

onclick 중첩

- HTML과 script에 같은 함수가 생성되거나 script 내에서 같은 함수를 여러개 생성하는 경우 기존값이 사라지고 후위에 생성된 함수만 남기때문에 나중에 생성된 코드만 실행된다.

<button onclick="console.log('누름 1');">눌러봐</button>

<script>
const btn = document.querySelector('button');
btn.onclick = function(){
  console.log('누름 2');
}
btn.onclick = function(){
  console.log('누름 3');
}
</script>
// 실행 결과 '누름 3'만 출력된다.

addEventListener

- DOM Level 2 방식(표준)	
- 요소 노드에 event 발생시 실행할 handler 함수 등록
- `elem.addEventListener(event, handler, [useCapture])`
	- event: 이벤트 이름(`click`, `mousemove`, `keydown` 등)
	- handler: 핸들러 함수
	- useCapture: 캡처링 단계의 이벤트 캐치 여부, false가 기본값이고 버블링 단계의 이벤트를 캐치

btn1.addEventListener('click', function(){
  // 코드 작성
});

addEventListener 중첩

- script 내에서 같은 함수를 여러개 생성하는 경우 기존 함수가 사라지지 않고 추가되는 방식이라 모든 함수를 출력한다.

btn.addEventListener('click', function(){
  console.log('누름 1');
});
btn.addEventListener('click', function(){
  console.log('누름 2');
});

// 실행 결과 '누름 1', '누름 2' 둘 다 출력된다.

removeEventListener

- 요소 노드에 event 발생시 실행할 handler 함수를 제거
- 핸들러를 등록할 때 지정했던 매개변수와 동일한 인자값의 핸들러가 삭제
- `fucntion 함수명()` 으로 선언해야만 제거된다.

// 제거 안되는 예시
const btn = document.querySelector('button');
btn.addEventListner('click', function(){
  console.log('버튼 클릭');
});
btn.removeEventListener('click', function(){
  console.log('버튼 클릭');
});
  
// 제거되는 예시
const btn = document.querySelector('button);
function handleClick(){
  console.log('버튼 클릭');
}
btn.addEventListener('click', handleClick, true);
btn.removeEventListener('click', handleClick, true);