JS : 이벤트 리스너(EventListener)란?

자바스크립트에서는 웹에서 사용자가 특정 반응을 할 때 설정한 동작을 보여준다.

이 반응을 이벤트라고 하는데 이벤트를 감지하기 위해 쓰이는 것이 ' .addEventListener ' 이다.

예를 들면, 사용자가 로그인 버튼을 클릭을 하면 웹은 개발자가 설정해놓은 동작(함수)이 발생할 것이다.

그 동작이 될 이벤트 조건을 걸어 놓고 이벤트가 발생되는지 계속 감지하는 것이 이벤트리스너이다.

(조)

이벤트리스너를 추가하기 위해서는

1) 이벤트를 감지하고 적용할 태그를 가져온다.

2) 어떤 작용을 감지할 것인지 설정한다.

3) 이벤트 감지시 발생할 함수를 만들어 준다.

4) 태그에 이벤트리스너를 추가해준다.

여기서 함수 안에 event.preventDefault();를 해야하는 경우가 있다.

가장 대표적인게 submit 일 것이다.

submit이 발생하는 순간 웹은 자동으로 새로고침을 해버리는데 그렇게 되면 우리가 해당 태그에 담긴 어떤 값을 가져와야 할 때

가져오지도 못하게 되는 것이다.

그냥 단순하게 생각하면 함수가 호출될 틈을 웹이 새로고침을 통해 날려버리는 것이다.

이것을 막아주는게 event.preventDefault(); 이다.

함수 내 첫 줄에 적어줘야 하며 함수의 인자로 아무 이름이나 지어주면 이벤트리스너가 그곳에 event를 던져준다.

우리는 event가 던져질 공간을 하나 만들어주는 것이다.

 

function onLoginSubmit(event) { // event가 들어올 공간을 하나 만들어준다 (다른 이름도 상관 없지만 암묵적 룰로 'e' 혹은 'event'를 쓴다고 한다)
	event.preventDefault(); // 웹 브라우저의 새로 고침을 막아준다.
	loginForm.classList.add(HIDDEN_CLASSNAME);
	const username = loginInput.value;
	console.log(username);
	localStorage.setItem(USERNAME_KEY, username);
	paintGreetings(username);
}

loginForm.addEventListener("submit", onLoginSubmit);
// 태그.addEventListener("감지할 동작", 이벤트로 쓰일 함수)

 

EventListener - Web API | MDN

이곳에서 다양한 이벤트 종류와 예시를 볼 수 있다.

아직 자바스크립트 진입중이라서 그런지 이벤트리스너가 너무 유용하고 좋은 함수같다.

이벤트리스너를 활용해보니 프론트엔드와 백엔드의 차이점에 대해 더 명확하게 머리에 그려진 느낌이다.

프론트엔드 개발이란 무엇을 하는지 이제야 조금 알게된 느낌ㅎㅎ