[JS] 이벤트리스너: 들을게 👂

파라미터의 난관을 넘고 나니 이벤트리스너라는 신나는 이름이 기다리고 있다! (사실 하나도 안신남)
이 프로경청러 녀석의 정체는 무엇일지 알아보자

---

 

우린 같은 class 👥 잖아

getElementsByClassName( '클래스명' )[ 순서 ].??? = '???';

- id 외에 class 로도 html 요소를 찾고 변경할 수 있다
- [ ] 안에는 찾을 요소의 순서를 넣어준다
→ 순서는 0부터 시작한다 (1부터 아님)

<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>

<script>
document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>

- [0]과 같이 순서를 넣는 이유:
getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문
→ 그 중 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여줘야 함

- (추가) 실제로는 class, id 로 찾는 셀렉터가 가장 흔하고..
이외에 getElementsByTagName (태그명으로 찾기), getElementsByName (name 속성으로 찾기) 등이 있음

예, 듣고 있어요 🙆
이벤트 리스너란?

지금까진 버튼의 onclick=" " 안에 자바스크립트를 길게 짰는데, 더 간단한 작성법이 있다
바로 이벤트리스너를 활용하는 것!
html 안에 자바스크립트를 적지 않고도 똑같은 개발을 진행할 수 있다

ex) 'id가 아이디이름인 요소를 클릭하면 안의 코드를 실행해주세요'

document.getElementById('아이디이름').addEventListener('click', function(){
    //실행할 코드 
});

 

---

 

문제

문제 1
아래와 같이 alert 박스 내부에 닫기 버튼이 있다. 이 버튼을 눌렀을 때 alert 창이 닫히도록 하려면 어떻게 해야 할까?
(onclick 말고 addEventListener 사용하기)

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

풀이
'id가 close인 버튼을 클릭하면 그 안의 코드를 실행해주세요'
→ 안에 있는 코드: alert div를 클릭하면 display가 none이 되게 해주세요

<div class="alert-box" id="alert">
  <p id="title">알림창임</p>
  <button id="close" 
  document.getElementById('close').addEventListener('click', function(){
    document.getElementById('alert').style.display = 'none';
  });
  > 닫기 </button>
</div>

문제 2
이전 글에서 작성한 코드를 오늘 배운 내용을 활용하여 다시 작성해보자
(** getElementsByClassName, addEventListener 사용)

풀이
- id 대신 class 부여
- addEventListener 사용
- button 에 작성된 onclick 부분 삭제

+ 이렇게 작성할 경우 전보다 훨씬 코드가 길어진다
그러나 자바스크립트 코드를 html 파트(script 외 부분)에 또 작성하는 것은 막을 수 있다
코드를 변경하면서 처음에는 코드가 이렇게 길어져도 되는 것일까..? 라고 했는데,
클린코드 책에서 좋은 코드는 길어도 괜찮으니 적절한 위치에 보기 쉽게 작성되어 있는 것이라는 말이 생각나서
다시 되돌리거나 새로 작성하지 않았다. 더 공부하다 보면 좋은 방법이 있겠지!

<div class="alert-box">
     <p class="alert-text"></p>
     <button class="close">닫기</button>
</div>
<button class="button-left">버튼1</button>
<button class="button-right">버튼2</button>

<script>
     document.getElementsByClassName('button-left')[0].addEventListener('click', function(){
            document.getElementsByClassName('alert-box')[0].style.display = 'block';
            document.getElementsByClassName('alert-text')[0].innerHTML = '아이디를 입력하세요';
     });

     document.getElementsByClassName('button-right')[0].addEventListener('click', function(){
            document.getElementsByClassName('alert-box')[0].style.display = 'block';
            document.getElementsByClassName('alert-text')[0].innerHTML = '비밀번호를 입력하세요';
     });

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

 

---

 

더 배워보기

1️⃣ 이벤트가 뭔데? 내가 아는 건.. 🎉

이벤트 리스너를 배우니, 이때의 '이벤트'가 뭔지 궁금해진다
(내가 아는 그 폭죽 팡팡 깜짝 이벤트가 아닐 거 아냐...)

사실 이벤트는 개발에서의 전문 용어로, 유저가 웹페이지에 접속해서 행하는 클릭, 스크롤, 키보드입력, 드래그 등을 가리킨다.
어떤 요소를 클릭하면 click 이벤트, 스크롤을 하면 mouseover 이벤트.. 이런 식이다

그리고 이러한 이벤트가 일어나기만을 오매불망 기다리는 친구가 이벤트리스너 라는 것이다
이벤트리스너는 이벤트가 일어나면 내부의 코드를 실행해주는 기본 문법이다

2️⃣ 뚜루루루... 콜백 📞 함수

아래 코드를 봤을 때, addEventListener 의 둘째 파라미터로 함수(function)가 들어가는데.. 그래도 될까?
(정답: 당연히 됨)

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

이렇게 함수 파라미터 자리에 들어가는 함수를 전문 용어로 '콜백함수'라고 부른다
콜백함수는 뭔가를 순차적으로 차근차근 실행하고 싶을 때 많이 보이는 함수인데,
그냥 함수 안에 함수를 넣으라고 하면 '이게 그 콜백함수구만!' 이라고 할 정도로만 이해해두자

---

 

TIL 끝!