🌿 이벤트 핸들러

함수event처리하거나 반응합니다.

애플리케이션은 이벤트 타입이벤트 대상을 지정해 웹브라우저에 이벤트 핸들러 함수를 등록합니다.

그리고 지정된 대상(HTML 요소)에서 지정된 타입의 event가 일어나면 브라우저가 핸들러 함수를 호출합니다.

이벤트 핸들러의 종류

이벤트 핸들러는 이벤트 청취자, 즉 위와 같은 이벤트가 발생하는것을 감지하는 역할을 합니다.

onclick

onclick="자바스크립트함수();"     // 해당 태그를 클릭했을때  자바스크립트 함수 실행

onchange

onchange="자바스크립트함수();"    // 해당 태그가 변경됐을때 자바스크립트 함수 실행

onblur

onblur="자바스크립트함수();"      // 해당 태그에서 벗어났을때 자바스크립트 함수 실행

이벤트 핸들러 적용예시

// 버튼 클릭시, 자바스크립트함수 실행
 버튼    

// 텍스트 변경시, 자바스크립트함수 실행
 

// 포커스 아웃시, 자바스크립트함수 실행

레벨업!

실무예제 - { 이벤트 핸들러 언제 사용하나요? }

버튼을 눌렀을 때 함수를 실행해야 한다거나 인풋창이 변할 때 함수를 실행해야 하는 등 적절한 시기에 함수를 실행해야 할 때 사용합니다.

스크린샷 2022-11-25 오전 11.35.22.png