JavaScript getElementsByClassName & 이벤트리스너

1. getElementsByClassName 사용법

<p class="title1"> 테스트1 </p>
<script>
  document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>

• 위와 같이 몇번째 요소를 바꿀지 [순서]를 꼭 붙여줘야 함
• [0] 이렇게 쓰면 찾은 것 중 위에서 부터 1번째 요소
• [1] 이렇게 쓰면 찾은 것 중 위에서 부터 2번째 요소
• [ ]을 안 붙이면 안됨.

---

2. 이벤트 리스너

• HTML안에 자바스크립트 안 적고도 똑같이 개발 진행 가능함
• 예시)

document.getElementByID('어쩌구').addEventListener('click', function() {
  // 실행 할 코드
});

• 이렇게 작성하면 'id가 어쩌구인 요소를 클릭하면 안의 코드를 실행해주세요~' 라는 뜻

• 이렇게 작성하면 버튼에 onclick을 넣을 필요가 없음

• 예시2)

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

document.getElementsByClassName('closeBtn')[0].addEventListener('click', function() {
        document.getElementsByClassName('alert-box')[0].style.display = 'none';
      });

---

3. 이벤트란 무엇인가?

• 유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부름.
• 어떤 요소 클릭시엔 click 이벤트, 마우스를 가져다대면 mouseover 이벤트, 스크롤 하면 scroll 이벤트, 키 입력하면 keydown 이벤트등 몇십가지가 있음.

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

• 예시)

셀렉터로찾은요소.addEventListener('mouseover', function(){ 
  실행할코드
});
// 셀렉터로 찾은 요소에 마우스를 가져다 대면 특정 코드를 실행

셀렉터로찾은요소.addEventListener('scroll', function(){ 
  실행할코드
});
// 셀렉터로 찾은 요소가 스크로 되면 특정 코드를 실행 (그 요소에 스크롤 바가 있어야함)

셀렉터로찾은요소.addEventListener('keydown', function(){ 
  실행할코드
});
// 셀렉터로 찾은 요소에 키보드로 글자를 입력하면 특정 코드를 실행 (그 요소가 글자를 입력할 수 있는 input 이런거여야 함.

• 이벤트 종류에는 수십가지가 있음: https://developer.mozilla.org/en-US/docs/Web/Events