자바스크립트 - 이벤트 핸들러 등록하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content" class="btns">
<button id="myBtn">JS Click!</button>
<button onclick="console.log('Hello Codeit!')">HTML Click!</button>
</div>
<script src="index.js"></script>
</body>
</html>
위 코드에서, JS click 버튼과 HTML click 버튼을 만들어두고,
HTML 버튼에는 HTML 내부에서 onclick 속성을 주어 문구가 출력하게 되어있다.
JS 버튼에도 이벤트 핸들러를 등록해보자
let btn = document.querySelector('#myBtn');
btn.onclick = function() {
console.log('Hi Codeit');
};
.onclick 프로퍼티도 문제점이 있다 : 새로운 이벤트 핸들러를 할당하게 되면 기존 값을 덮어쓰기가 됨 (이전거는 동작하지 않음) -> 여러 개의 이벤트를 다룰 수 없다.
하나의 이벤트 핸들러 안에 여러개의 이벤트 핸들러를 넣는 방법
function event1(){
console.log('text1')};
function event2(){
console.log('text2')};
btn.onclick = function(){
event1();
event2();
}
=> 새로운 이벤트 핸들러를 추가하거나 삭제하기 어려움
& 각 이벤트 별 리턴값을 다루기 어려움
가장 권장하는 이벤트 핸들러를 다루는 방법
elem.addEventListener('event', handler) => event 는 문자열로 전달
하나의 요소에 여러 개의 독립적인 이벤트 핸들러를 등록할 수 있다
function event1(){
console.log('text1')};
function event2(){
console.log('text2')};
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);
이벤트 핸들러를 개별적으로 삭제
btn.removeEventListener(event, event2);
주의!
등록할때 사용한 핸들러를 그대로 전달해야한다
ex. 핸들러를 전달하는 부분에서 함수를 바로 작성할 수도 있음
btn.addEventListener('click', function(){
console.log('event3!' );
})
btn.removeEventListener('click', function(){
console.log('event3!' );
}); => 모양은 같지만 서로 다른 함수이므로 삭제되지 않음
따라서 이벤트를 등록할 때 외부에 함수를 만들어서 해당 함수의 이름으로 핸들러를 전달해줘야한다.
& 소괄호 ()를 뺀 함수 이름만 전달 : ()를 포함하면, 함수가 실행한 결과를 전달한다.
마우스 이벤트
이벤트 타입설명| mousedown | 마우스 버튼을 누르는 순간 |
| mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
| click | 왼쪽 버튼을 클릭한 순간 |
| dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
| contextmenu | 오른쪽 버튼을 클릭한 순간 |
| mousemove | 마우스를 움직이는 순간 |
| mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
| mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
| mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
| mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
키보드 이벤트
이벤트 타입설명| keydown | 키보드의 버튼을 누르는 순간 |
| keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
| keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
포커스 이벤트
이벤트 타입설명| focusin | 요소에 포커스가 되는 순간 |
| focusout | 요소로부터 포커스가 빠져나가는 순간 |
| focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
| blur | 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
입력 이벤트
이벤트 타입설명| change | 입력된 값이 바뀌는 순간 |
| input | 값이 입력되는 순간 |
| select | 입력 양식의 하나가 선택되는 순간 |
| submit | 폼을 전송하는 순간 |
스크롤 이벤트
이벤트 타입설명| scroll | 스크롤 바가 움직일 때 |
윈도우 창 이벤트
이벤트 타입설명| resize | 윈도우 사이즈를 움직일 때 발생 |
출처 : 코드잇