이벤트 핸들러

이벤트 핸들러 (이벤트 처리기)

이벤트가 발생하면 처리하는 함수

 

이벤트 처리 방법

① HTML 태그에 직접 연결

<ul>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다 1')">첫번째</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다 2')">두번째</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다 3')">세번째</a></li>
</ul>

첫번째 요소 클릭

② 자바스크립트 함수로 생성

  <ul>
    <li onclick="change('카레')">카레</li>
    <li onclick="change('우동')">우동</li>
    <li onclick="change('돈까스')">돈까스</li>
  </ul>

  <div id="result">제일 좋아하는 음식은?</div>

  <script>
    function change(text) {
      let result = document.querySelector('#result'); // div 요소 가져오기
      result.textContent = text; // 가져온 div 요소에 인수로 넘겨받은 text로 변경
    }
  </script>

li 요소 하나를 클릭할 때마다 카레, 우동, 돈까스 텍스트를 인수로 넘겨서 change(text) 함수 실행

클릭 전 & 후

 

 

 

 

 

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