이벤트 리스너와 콜백함수 기초개념 뿌시기

sunaaa·2021년 3월 13일

JavaScript

📞 이벤트 리스너란?

우선 '이벤트'는 무엇을 의미하나?

이벤트란 사용자가 어떤 결과를 유발시킬만한 행동(버튼 클릭, 엔터 누르기 등)을 할 때 발생하는 것이다.

UI 이벤트 : 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생
키보드 이벤트 : 사용자가 키보드를 이용할 때 발생
마우스 이벤트 : 사용자가 마우스나 터치 화면을 사용할 때 발생
포커스 이벤트 : 사용자로 특정 요소에 포커스를 하거나 포커스를 관뒀을 때 발생

그렇다면 이벤트 리스너란 무엇일까?

이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기중인 것을 말한다.

항상 리스닝 중!
(="너의 말을 듣고 있고, 명령을 내리면 바로 실행할 수 있도록 대기타고 있다")
해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행됨.
이벤트 리스너는 항상 on + '이벤트명'으로 명명된다.

이벤트 리스너 종류에는 무엇이 있을까?

아래 샘플 코드와 같이 문법에 맞춰서 앞에 on을 붙여서 쓰면 된다.
ex.리액트에서는 이벤트명 첫글자를 대문자로 써줘야 한다.

// 샘플 코드
window.onload = function () { // window가 load될 때 function 부분이 실행됨. load여부는 브라우저가 알려줌.
  alert('I\'m loaded'); // 알림창을 띄움
};

1) UI 이벤트

load 문서나 객체가 로드 완료 되었을 때 발생

change 객체의 내용이 변동되거나 focus를 잃었을 때 발생

resize 객체의 크기가 바뀌었을 때 발생

scroll 스크롤바를 조작할 때 발생

error 에러가 발생했을 때 발생

2) 키보드 이벤트

keydown 키를 눌렀을 때 발생

keyup 키를 눌렀다가 뗐을 때 발생

keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 발생

3) 마우스 이벤트

click 객체를 클릭했을 때 발생

dblclick 객체를 더블클릭했을 때 발생

mousedown 마우스를 클릭 했을 때 발생

mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생

mouseover 마우스가 특정 객체 위로 올려졌을 때 발생

mousemove 마우스가 움직였을 때 발생

mouseup 마우스에서 손을 땟을 때 발생

4) 포커스 이벤트

focus 객체에 focus가 되었을 때 발생

blur 객체가 focus를 잃었을 때 발생

5) 폼 이벤트

input input,textarea 요소 값이 변경되었을 때 발생

change 선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때 발생

select 텍스트를 선택을 했을 때 발생

reset 리셋 버튼을 눌렀을 때 발생

submit 사용자가 버튼키 등을 활용하여 폼을 전송할 때 발생

cut/copy/paste 사용자가 폼필드의 콘텐츠를 잘라내기/복사/붙여넣기 했을 때 발생

더 알아보기 : addEventListener()

JavaScript에서 이벤트를 붙이는 다른 방법으로 addEventListener가 있다. 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 것이다. addEventListener를 사용하면 여러 이벤트를 등록할 수 있고, 특정 이벤트를 제거(removeEventListener)할 수도 있다.

구문 : addEventListener('이벤트종류', 함수명)
1) 등록해서 사용할 때
const st = document.getElementById("test"); st.addEventListener('이벤트종류', '함수명');
2) 등록 후 제거할 때
st.removeEventListener('이벤트종류', '함수명);

이벤트명 위치에는 다른 이벤트에서 on만 떼고 위의 리스트에 있는 이벤트명을 집어넣으면 된다.(아래 예시 참고)

// 샘플 코드
function onClick1() {
  alert('I\'m clicked!');
}
function onClick2() {
  alert('또다른 이벤트');
}
document.getElementById('clickMe').addEventListener('click', onClick1); // 이벤트 연결
document.getElementById('clickMe').addEventListener('click', onClick2); // 또 하나의 이벤트 연결
document.getElementById('clickMe').removeEventListener('click', onClick1); // 연결할 이벤트 중 하나 제거

여기서 잠깐, 콜백 함수란 무엇일까?

위의 이벤트리스너 코드들에서 function 부분을 콜백이라고 부른다.

영어로는 callback(call + back) 즉, 다시 전화주는 것이다.

이벤트가 실행됐을 때, 사용자에게 다시 알려주는 것.

onload, onclick 같은 속성에 콜백을 등록하거나 대입하면 된다.

꼭 이벤트가 아니더라도 콜백을 활용할 수 있다.

함수의 인자로 전달된 함수의 경우 언제든 원하는 시점에 실행을 시킬 수 있다. 콜백함수는 전달받은 즉시 실행될 필요가 없다는 점이 포인트다.

콜백은 언제 끝날 지 모르는 동작에 대해 그 결과를 전달받을 때 유용하다. 하염없이 기다릴 필요없이 다 됐을 때 알아서 알려주기 때문이다.

위의 내용은 콜백함수에 대한 기초적인 부분이다.
(개인적으론, 입문자 단계이니 이 정도 선에서 콜백함수에 대한 이해를 마치고, 우선 여러가지 구현을 해본다음 나중에 콜백함수를 더 깊게 살펴보려한다)
콜백함수를 더 깊이 이해하고 싶다면 (클릭)

콜백함수는 어떻게 동작할까?

자바스크립트에서 모든 것은 객체다. 심지어 함수도 객체다. 그래서 우리는 함수를 변수처럼 그리고 다른 함수의 리턴값으로 사용이 가능하게 된다. 함수를 콜백으로 다른 함수의 인자처럼 사용 할 경우에는 오직 함수의 정의만을 넘겨주면 된다.
즉, 함수의 이름만을 넘겨주면 됩니다. 굳이 함수라고 하여 끝에 () 같은 것을 붙여 줄 필요가 없다.

이벤트 리스너 깊게 알아보기

이벤트의 흐름

HTML 요소는 다른 요소의 내부에 중첩된다. 때문에 자식 요소에 마우스를 가져가거나 클릭하면 그 부모 요소에도 마우스를 가져가거나 클릭한 셈이 된다.

이벤트 버블링

DOM에 연결한 이벤트는 버블링이 일어난다. 버블링이란 자식의 이벤트가 부모에도 전달되는 것을 말한다. 즉,이벤트가 사용자의 동작에 직접적으로 영향을 받은 특정 노드로부터 시작하여 가장 무관한 요소를 향해 바깥으로 전파되어 나가는 방식이다. 대부분의 브라우저가 기본적으로 지원하는 방식이다.

이벤트 버블링 더 알아보기(클릭)

참고로, 반대되는 방식은 이벤트 캡쳐링이라고 한다.
현재의 모든 브라우저들은 기본적으로 이벤트 캡쳐링 대신 이벤트 버블링을 사용한다.

이벤트 리스너를 사용하는 경우 addEventListener () 메서드의 마지막 매개변수에 설정하는 값에 따라 발생한 이벤트의 전파 방향을 선택할 수 있다.

예시 : <a> => <li> => <ul> => <body> => <html>

이벤트 객체

DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있다. 이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 메소드들이 들어있다.

// 샘플 코드
document.onclick = function(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
};

대표적인 메소드

preventDefault : 사용자가 링크를 클릭하거나 폼을 제출해도 계속 같은 페이지에 머무르게 할 때 사용함.

stopPropagation : 어느 한 요소를 이용해서 이벤트를 처리하고 나면 이벤트가 부모 요소로 버블링 되는데 이것을 중단할 때 사용함.

stopImmediatePropagation : 버블링을 막음과 동시에 같은 이벤트의 다른 리스너도 실행되지 않도록 함. 만약 여러 개의 클릭 이벤트를 동시에 연결한 경우, stopPropagation으로 클릭 이벤트를 막아도 다른 클릭 이벤트는 실행됨. 하지만 stopImmediatePropagation으로 클릭 이벤트를 막으면 부모에게는 어떠한 이벤트도 버블링되지 않으면서 다른 클릭 이벤트도 실행되지 않음. 단, 다른 종류의 이벤트(마우스 오버 등)는 막지 못함.

ie8 이하 브라우저 사용 시 주의사항
preventDefault ie5-ie8 브라우저는 returnValue라는 속성에 false를 지정하는 방법을 대신 사용한다.
이 경우 조건문을 이용하여 preventDefault() 메서드가 지원되는지 확인한 후, 메서드가 제공되지 않으면 ie8 방법을 사용한다.
stopPropagation ie8 이하 버전에서는 cancelBuble 속성에 true를 지정하는 방법을 대신 사용한다.