[JavaScript기초] 4. 셀렉터와 이벤트리스너(with 콜백함수)

셀렉터(selector) 란?

앞에서 셀렉터(selector)에 대해서 언급을 하지 않았지만, 이미 사용하고 있다.

 

셀렉터는 HTML Tag를 스타일링해주기 위해 특정 tag를 선택하기 위해 사용한다.

 

셀렉터의 종류

- id를 선택할 때 : getElementById('id 이름')
- class를 선택할 때 : getElementsByClassName('class 이름')

사용예시

<div class="alert-box" id="alert">
        <p class="title">alert1</p>
        <button onclick="manageAlert('none')">X</button>
    
 </div>
 
 <script>
        function alertScetance(scentance){
            document.getElementsByClassName('title').innerHTML = scentance;  //작동안됨
            document.getElementById('alert').style.display = 'block';
        }
  </script>

** 하지만, class는 id와 다르게 여러개를 지정할 수 있기 때문에, 뒤에 indexing을 꼭 해줘야한다.

 

위에 코드를 아래와 같이 바꿔줘야 작동을 한다. (class를 찾은 것 중에 몇번째인지 써줘야 함)

 document.getElementsByClassName('title')[0].innerHTML = scentance;

 

그 외에도 tag 이름으로 찾을 수 있는 getElementsByTagName 등이 있다.

 

 

이벤트리스너 (EventListener)

<button onclick="manageAlert('none')">X</button>

위 코드 처럼 button에 직접 onclick 속성을 부여하지 않고, eventListner를 사용해서 

버튼 클릭시 동작하도록 만들어 보자

 

EventListener 사용법

document.getElementById('close').addEventListener('click', function(){
    document.getElementById('alert').style.display = 'none';
});

버튼에 close라는 id를 부여해주고, 그 요소를 찾아서 addEventListener를 붙여준다.

addEventListener는 2가지 매개변수가 필요한데, 특정동작( 'click')을 했을 때, 어떤 동작(function) 을 할지 function 안에 써주면된다.

 

참고로 이벤트의 종류로는

click 이벤트, moveseover, scroll, keydown 등 수많은 이밴트가 존재한다.

사용법은 아래와 같은 형태로 하면된다.

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

 

즉, 이벤트리스너는 일종의 감시자 역할을 하면서, 유저가 행하는 이밴트를 감시해주는 역할의 함수!

 

콜백함수 (callback function)

위에 이벤트리스너에서 아래와 같이 매개변수로 function이 들어가 있다.

document.getElementById('close').addEventListener('click', function(){
    document.getElementById('alert').style.display = 'none';
});

이런식으로 함수 파라미터자리에 들어가는 함수를 콜백함수 라고 부른다.

 

콜백함수는 코드를 순차적으로 실행하고 싶을 때 사용하는 함수의 형태이며,

 

단순히 함수안에 함수를 넣으면 콜백함수라고 생각하면된다.

 

출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'