자바스크립트 이벤트리스너를 왜 쓰는가?

2023.03.26 - [Front end/JavaScript] - 자바스크립트 function의 파라미터 문법 왜 쓰는가?

자바스크립트 function의 파라미터 문법 왜 쓰는가?

위 포스팅에서 사용한 예제를 이어서 사용하기 때문에 위 포스팅을 보시면 이해가 더 빠를수도?!

 

지금까진 버튼의 onclick=" " 안에 자바스크립트 코드를 길게 짰는데 이것 도 좀 별로 같다. 자바스크립트 코드는 따로 자바스크립트에서만 사용하고 싶다면? 이벤트리스너 문법을 사용하면 된다. 그럼 html 안에 자바스크립트 코드 안 써도 똑같이 개발할 수 있다.

 

 

 

📌 이벤트 리스너 쓰는 방법

document.getElementById('???').addEventListener('click', function(){
  // 실행할 코드
});

위와 같이 작성하면 id가 ???인 요소를 클릭하면 function 중괄호 안의 코드를 실행해주세요~ 라는 뜻이다.

이거 쓰면 html 내에 onclick 넣을 필요가 없다! ( 가독성 up! )

 

 

 

🔎 이벤트 리스너 응용 예제

<div class="alert-box" id="alert">
  <p id="title">알림창임</p>
  <button id="close"> 닫기 </button>
</div>

alert 박스 내부에 닫기버튼이 있다.

이걸 누르면 alert 창이 닫히도록 하려면 어떻게 해야할까?

onclick 말고 addEventListener를 써보자.

<script>
  document.querySelector('#close').addEventListener('click', function () {
    document.querySelector('.alert-box').style.display = 'none';
});
</script>

html안에 onclick 속성을 굳이 안써도 똑같은 기능 개발을 할 수 있음. 이게 이벤트 리스너를 쓰는 이유이다. 

즉, html 파일엔 html 코드만 js 파일에는 js 코드만 사용하면 더 가독성이 좋아지고 유지보수도 좋아질 것이다.

 

 

 

🧠 더 알아볼 개념 1. event

이벤트 리스너를 배웠는데 이벤트가 뭔지 모를수도 있다.

 

이벤트란?

- 유저가 웹페이지를 접속해서 클릭, 스크롤, 키보드입력, 드래그 등 여러가지 다양한 상호작용을 할 수 있는데 이걸 이벤트라고 부른다.

 

어떤 요소 클릭시엔 click 이벤트

마우스 갖다대면 mouseover 이벤트

스크롤하면 scroll 이벤트

키입력하면 keydown 이벤트

... 수십가지가 있다.

 

그리고 이벤트가 일어나길 기다리는 친구가 이벤트 리스너이다. 이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해주는 문법이다. 

 

 

그러므로 이벤트 리스너 쓰면 다양한 이벤트도 체크가능하다.

셀렉터로찾은요소.addEventListener('mouseover', function(){ 
  실행할코드
});

▲ 이러면 셀렉터로찾은요소에 마우스를 갖다대면 특정 코드를 실행해준다.

 

셀렉터로찾은요소.addEventListener('scroll', function(){ 
  실행할코드
});

▲ 이러면 셀렉터로찾은요소가 스크롤되면 특정 코드를 실행해준다. (당연히 그 요소에 스크롤바가 있어야됨)

 

셀렉터로찾은요소.addEventListener('keydown', function(){ 
  실행할코드
});

▲ 셀렉터로찾은요소에 키보드로 글자를 입력하면 특정 코드를 실행해준다. (그 요소가 글자를 입력할 수 있는 input 이런거여야 한다.)

 

 

이벤트 종류는 수십가지가 있다. 외우지말고 찾아서 아래 코드에서 찾아서 사용해보자.

https://developer.mozilla.org/en-US/docs/Web/Events

 

 

 

🧠 더 알아볼 개념 2. 콜백함수

셀렉터로찾은요소.addEventListener('scroll', function(){} );

이벤트 리스너의 생김새를 잘 살펴보면 함수같이 생겼다. 함수가 맞다. 뒤에 소괄호 붙으면 다 함수이다.

 

근데 addEventListener() 함수에는 인수 자리에 2개의 자료를 넣는걸 볼 수 있다.

이건 자바스크립트 addEventListener 문법 만든 사람이 그렇게 쓰라고 하는거니까 이해 그런거 필요없다. 원칙이다. 

 

하지만 두번째 인수로 함수가 들어간다. 입문자가 보기에는 어색할 것이다. 나도 그랬다.. 

하지만 자바스크립트에서는 함수도 결국 자료의 일종이다. 그래서 인수에 넣을 수 있다.

 

그리고 저렇게 함수 인수자리에 들어가는 함수를 콜백함수라고 한다.

콜백함수는 순차적으로 실행하고 싶을 때 많이 보이는 형태이다.

 

 

 

🌈 정리 

- 이벤트 리스너를 쓰면 html 파일안에 자바스크립트 코드 작성 안해도됨! 가독성,유지보수 up!

- 이벤트 리스너를 쓰면 다양한 이벤트를 체크가능함

- 함수 전달인자 안에는 함수가 들어갈 수 있으며 들어간 함수를 콜백함수라고함. 순차적으로 실행할때 많이 보이는 형태!