DOM을 이용한 이벤트 처리기

• 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다.
  

  웹 요소.onclick = 함수;​

• 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector( )를 사용하여 가져오는 것이 쉽다.
  - querySelector( )의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택지를 넣을 수 있다.
• 예시
  1. querySelector( )를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장한다. 그리고 changeBttn에 onclick을 사용해 changeColor( ) 함수를 연결한다.
    ▷ 이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것이다.
  

  <script>
          var changeBttn = document.querySelector("#change");
          changeBttn.onclick = changeColor;
  
          function changeColor() {
              document.querySelector("p").style.color = "#f00";
          }
  </script>

  2. 웹 요소의 프로그램 안에서 여러 번 사용하지 않는다면 다음과 같이 변수에 할당하지 않고 직접 사용해도 가능하다.
  

  <script>
          document.querySelector("#change").onclick = changeColor;
  
          function changeColor() {
          	document.querySelector("p").style.color = "#f00";
          }​

  3. 함수를 딱 한 번만 사용한다면 위 코드에서 changeColor라는 함수 이름이 들어갔던 자리에 직접 함수를 선언해도 된다.
  

  <script>
  	document.querySelector("#change").onclick = function() {
  	document.querySelector("p").style.color = "#f00";​
  </script>