[JavaScript]_Event handler 작동 과정 및 다양한 이벤트 종류

hanseungjune·2022년 6월 26일

목록 보기

76/87

✅ Click Event

☑️ onclick 프로퍼티

// 이벤트 등록하기
let btn = document.querySelector('#myBtn');

btn.onclick = function() {
 console.log('Hi Codeit!'); 
}

☑️ addeventListener() - 함수선언 따로

// 이벤트 등록하기
let btn = document.querySelector('#myBtn');

function event1() {
  console.log('Hi Codeit!');
}

function event2() {
  console.log('Hi again!');
}

// elem.addEventListener(event, handler)
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);

☑️ removeEventListener()

// elem.removeEventListener(event, handler)
btn.removeEventListener('click', event2);

☑️ add, removeEventListener() - handler 자리에 함수선언

// 이벤트 등록하기
let btn = document.querySelector('#myBtn');

btn.addEventListener('click', function(){
  console.log('nyamnyam');
});

// 이렇게 해도 안지워짐
btn.removeEventListener('click', function(){
  console.log('nyamnyam');
});

같은 형태라서 제거가 가능하지만, 컴퓨터에서는 다른 함수라고 칭하기 때문에 handler 자리에 함수 선언을 할 시에는 제거가 되지 않는다. ( 그래서 그냥 함수 선언을 따로 하고 handler 자리에 함수를 넣는게 낫다고 봄 )

✅ 다양한 이벤트

아직까진 click 이벤트 하나만에 대해서만 배웠는데요, 이 외에도 사용자의 동작에 따라 반응할 수 있는 다양한 이벤트들이 있습니다.

이후에도 천천히 살펴볼 예정이지만 어떤 종류의 이벤트들이 있는지 미리 알아두면 필요할 때 알맞은 이벤트 핸들러를 설정할 수 있겠죠?

처음에는 가볍게 참고만 해뒀다가, 나중에 다양한 이벤트들을 살펴본 다음 다시 돌아와 복습한다면 훨씬 더 도움이 될거예요! :)

☑️ 마우스 이벤트

이벤트 타입	설명
`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`	윈도우 사이즈를 움직일 때 발생

✅ 이벤트 핸들러 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
</head>
<body>
  <button id="btn">Click!</button>
  <script src="index.js"></script>
</body>
</html>

const btn = document.querySelector('#btn');

function printBtn() {
  console.log(btn.outerHTML);
}
  
btn.onclick = function() {
  console.log('click!');
};
btn.onclick = printBtn;
btn.removeEventListener('click', printBtn);