📌 오늘의 생각

이벤트 핸들러를 통해 단순히 시각적인 디자인을 넘어 실질적으로 사용자가 디자인을 활용하여 조작할 수 있도록 만드는 법을 배웠다. 이러한 내용을 바탕으로 지난날에 배운 함수를 활용하여 기능을 조금씩 완성시켜나갈 수 있게 되었다. 오늘은 상대적으로 개념적인 학습량이 적었지만, 이번주 동안 배운 내용들을 활용하여 프로젝트 및 복습을 하는데 많은 시간을 사용하였다.

---

📒 목차

• 이벤트 핸들러

---

HTML

1️⃣ 이벤트 핸들러

• event를 처리 또는 반응하는 기능을 한다
• event 타입과 event 대상을 지정 후 웹브라우저에 이벤트 핸들러 함수를 등록한다
• HTML에서 지정된 타입의 event가 발생하면 브라우저가 핸들러 함수를 호출한다

✅ 이벤트 핸들러의 종류

• 이벤트 핸들러는 이벤트가 발생하는 것을 감지한다

onclick

// 해당 태그를 클릭했을 때 자바스크립트() 함수 실행
//
onclick = "자바스크립트함수()"
//
// 버튼 클릭시, 자바스크립트함수 실행
<button onclick="자바스크립트함수()"> 버튼 </button>

onchange

// 해당 태그가 변경되었을 때 자바스크립트() 함수 실행
//
onchange = "자바스크립트함수()"
//
// 텍스트 변경시, 자바스크립트함수 실행
<input type="text" onchange="자바스크립트함수()" />

onblur

// 해당 태그에서 벗어났을 때 자바스크립트() 함수 실행
//
onblur = "자바스크립트함수()"
//
// 포커스 아웃시, 자바스크립트함수 실행
<input type="text" onblur="자바스크립트함수()" />