DOM을 이용한 이벤트 핸들러

DOM 사용하기

DOM을 사용하면 HTML의 요소를 자바스크립트로 가져와서 이벤트 핸들러를 연결

querySelector()로 가져오는 것이 일반적(?)

querySelector()의 괄호 안에는

가져올 요소가 id="a"라면 '#a'

가져올 요소가 class="a"라면 '.a' 작성

 

① 웹 요소를 변수로 지정한 후 만들어둔 함수 사용

  <button id="change">색깔 바꾸기</button>
  <p class="text">샘플 텍스트!</p>

  <script>
    let changeButton = document.querySelector('#change');
    changeButton.onclick = changeColor; // 함수이름 뒤에 괄호 없음!

    function changeColor() {
      document.querySelector('.text').style.color = "pink";
    }
  </script>

클릭 전 & 후

 

② 변수 만들지 않고 사용

  <button id="change">색깔 바꾸기</button>
  <p class="text">샘플 텍스트!</p>

  <script>
    document.querySelector('#change').onclick = changeColor;

    function changeColor() {
      document.querySelector('.text').style.color = "skyblue";
    }
  </script>

클릭 전 & 후

 

③ 함수 직접 선언 (함수를 딱 한 번만 사용할 때)

  <button id="change">색깔 바꾸기</button>
  <p class="text">샘플 텍스트!</p>

  <script>
    document.querySelector('#change').onclick = function changeColor() {
      document.querySelector('.text').style.color = "red";
    };
  </script>

클릭 전 & 후

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.