자바스크립트 addEventListener

자바스크립트로 웹서비스를 만드는 공부를 하고 있습니다.

오늘은 addEventListener에 대해서 한 번 적어볼게요.

 

addEventListener는 웹에서 어떤 이벤트가 발생했을 때 호출할 함수를 추가할 수 있는 메서드입니다.

 

예를 들어 로그인할 때 로그인 버튼을 누르잖아요? 이 때 submit 이벤트가 감지되고 미리 짜놓은 Login 함수가 동작할 수 있도록 할 수 있습니다.

 

# HTML에서 id가 login-form인 element를 loginForm으로 지정합니다.

const loginForm = document.querySelector("#login-form");

 

# loginForm에서 submit 이벤트가 감지됐을 때 onLoginSubmit 함수를 동작합니다.

loginForm.addEventListener("submit", onLoginSubmit);

 

# onLoginSubmit 함수는 로그인 인풋에 유저가 넣은 값을 로컬스토리지에 저장하는 함수입니다.

function onLoginSubmit(event) {

  event.preventDefault();

  const usernameTyped = loginInput.value;

  localStorage.setItem(USERNAME_KEY, usernameTyped);

}

 

이렇게 코드를 짜면 로그인 화면에 유저가 이름을 넣었을 때, 로컬스토리지에 이름을 저장하게 됩니다. 

 

이 기능이 어디에 사용되는지 볼까요?

아래는 momentum이라는 아주 유명한 크롬 앱입니다.

 

모멘텀 앱의 첫 화면

 

여기에 제 이름을 넣고 제출을 해보겠습니다.

 

이름을 넣고 로그인을 하면 이렇게 인사를 해주네요.

 

이렇게 제 이름을 기억해서 인사를 해주네요!

위 코드만으로 이렇게 나오진 않지만 addEventListner를 활용하면 이렇게 제 이름을 기억하도록 할 수 있습니다.

위 코드는 nomadcoder님의 강의를 참고했습니다.

 

저는 모멘텀 앱을 참고한 Todo 앱을 만들고 있습니다.

 

혹시 궁금한 분이 있을까 싶어서 모멘텀앱 링크 남겨놓을게요!

https://chromewebstore.google.com/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca

Momentum