[JavaScript] EventListener, 이벤트리스너

 

 

 

 

getElementsByClassName 셀렉터

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

이런 html 요소가 있다.

셀렉터로 찾아 변경하고 싶으면 class명이 title인 것을 찾아라고 명령을 줄 수 있다. 

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

이러면 <p> 태그 내용이 안녕으로 바뀐다.

getElementsByClassName('클래스명')[순서] 이렇게 쓰면 된다.

 

[0] 이렇게 [순서]를 넣는 이유는 

getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아 주기 때문이다.

그래서 그 중에 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여 줘야 한다.

[0] : 찾은 것 중 위에서부터 1번째 요소

[1] : 찾은 것 중 위에서부터 2번째 요소

...

 

(참고)

getElementsByTagName (태그명으로 찾아 줌), getElementsByName(name 속성으로 찾아 줌) 등 여러가지 셀렉터가 있는데 class, id로 찾는 게 가장 흔한 방법이다.

 

이벤트 리스너

 <button onclick="closeAlert()">닫기</button>

지금까지는 이렇게 버튼의 onclick=" "안에 자바스크립트를 길게 작성했다.

이벤트 리스너 문법을 사용하면 html 안에 자바스크립트를 적지 않고 똑같이 개발 진행을 할 수 있다.

 

이벤트 리스너는 이렇게 사용한다.

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

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

이걸 쓰면 버튼 같은 곳에 onclick을 넣을 필요가 없다.

 

 

---

 

 

<div id="alert-box">
    <p id="title">알림창입니다.</p>
    <button onclick="openAlert('none')">닫기</button>
</div>

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

이 버튼을 누르면 alert 창이 닫히도록 onclick 말고 addEventListener를 사용해 기능 개발을 해 보자.

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

이렇게 작성하면 된다.

자바스크립트 양은 늘어났지만 HTML은 건드리지 않아도 돼서 깔끔하다.

 

 

---

 

더 배워 볼 개념

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 

Event reference | MDN

 

 

2. 콜백함수

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

이벤트 리스너의 생김새를 잘 보면 함수 같이 생겼다.

사실 소괄호가 붙으면 다 함수이다.

 

그런데 addEventListener() 함수에는 파라미터 자리에 2개의 자료를 집어 넣는다. 

둘째 파라미터에는 함수가 들어가는데, 저렇게 함수 파라미터 자리에 들어가는 함수를 전문 용어로 '콜백함수'라고 한다.

콜백함수는 뭔가 순차적으로 실행하고 싶을 때 많이 보이는 함수 형태이며 함수 안에 함수 넣으라고 하면 그건 콜백함수라는 걸 알면 된다.

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.