JS(9). 이벤트핸들러 (2)함수 종류

HTML 요소에서 발생하는 특정 이벤트(동작)에 반응하여 실행되는 함수를 의미.

예를 들어, 사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 체크박스를 선택하는 등 "사용자의 동작"을 처리하는 데 사용된다.

즉, 이벤트 핸들러는 사용자 동작에 반응하는 함수다.

 

1. onclick

onclick은 요소가 클릭되었을 때 발생하는 이벤트를 의미한다.
버튼, 링크, 체크박스 등 클릭 가능한 요소에 주로 사용된다.

<button onclick="alert('클릭되었습니다!')">클릭</button>

• 버튼을 클릭하면 onclick 이벤트 핸들러가 실행되어 "클릭되었습니다!"라는 알림이 뜬다.

2. onchange

onchange는 요소의 값이 변경되었을 때 발생하는 이벤트를 의미한다.
주로 <input>(텍스트, 숫자, 체크박스 등), <select>(드롭다운)와 같은 입력 요소에서 사용된다.

<input type="text" onchange="alert('값이 변경되었습니다!')" placeholder="값을 입력하세요">

• 사용자가 값을 입력한 후 포커스가 다른 곳으로 이동할 때 onchange 이벤트가 실행되어 "값이 변경되었습니다!"라는 알림이 뜬다.

onclick과 onchange의 차이

이벤트 핸들러언제 발생하는가?주로 사용하는 요소

onclick	요소를 클릭할 때 발생한다.	버튼, 링크, 체크박스 등
onchange	요소의 값이 변경된 후 포커스가 벗어날 때 발생한다. (즉, 입력 완료 후에 동작)	입력 필드(input, select 등)

3. oninput

oninput은 입력 요소의 값이 실시간으로 변경될 때 발생한다.
onchange와 달리 포커스가 벗어나지 않아도 즉시 실행된다.

<input type="text" oninput="console.log('입력 중: ' + this.value)" placeholder="입력하세요">

• 사용자가 텍스트를 입력할 때마다 oninput 이벤트가 발생하여 입력된 값이 실시간으로 출력된다.

4. onfocus / onblur

• onfocus: 요소가 포커스를 얻을 때 발생한다.
• onblur: 요소가 포커스를 잃을 때 발생한다.

<input type="text" onfocus="console.log('포커스가 잡혔습니다')" onblur="console.log('포커스를 잃었습니다')">

 

• 사용자가 입력 필드를 클릭하면 onfocus 이벤트가 실행된다.
• 입력 필드를 벗어나면 onblur 이벤트가 실행된다.

5. onmouseover / onmouseout

• onmouseover: 사용자가 요소 위로 마우스를 올릴 때 발생한다.
• onmouseout: 사용자가 요소 위에서 마우스를 벗어날 때 발생한다.

<div onmouseover="console.log('마우스를 올렸습니다')" onmouseout="console.log('마우스를 벗어났습니다')" style="width: 100px; height: 100px; background: lightblue;">
    마우스를 올려보세요
</div>

 

 

• 마우스를 박스 위로 올리면 onmouseover 이벤트가 실행된다.
• 마우스를 박스 밖으로 이동하면 onmouseout 이벤트가 실행된다.

6. onsubmit

onsubmit은 폼(form)을 제출할 때 발생하는 이벤트를 의미한다.
폼의 기본 동작을 막기 위해 자주 사용된다.

<form onsubmit="event.preventDefault(); alert('폼이 제출되었습니다!')">
    <input type="text" placeholder="이름 입력">
    <button type="submit">제출</button>
</form>

 

• "제출" 버튼을 클릭하면 폼의 기본 동작(페이지 새로고침)이 막히고, 대신 알림이 표시된다.

 

7. onkeydown / onkeyup

• onkeydown: 키보드를 눌렀을 때 발생한다.
• onkeyup: 키보드를 눌렀다가 뗐을 때 발생한다.

<input type="text" onkeydown="console.log('키를 눌렀습니다')" onkeyup="console.log('키를 뗐습니다')" placeholder="키보드를 눌러보세요">

 

• 키보드를 누르면 onkeydown 이벤트가 실행된다.
• 키보드를 떼면 onkeyup 이벤트가 실행된다.

이벤트 핸들러 요약

이벤트 핸들러역할주로 사용하는 요소

onclick	요소를 클릭했을 때 실행	버튼, 링크, 체크박스 등
onchange	입력 값이 변경된 후 실행	입력 필드(input, select 등)
oninput	입력 값이 실시간으로 변경될 때 실행	입력 필드(input, textarea 등)
onfocus	요소가 포커스를 얻을 때 실행	입력 필드(input, textarea 등)
onblur	요소가 포커스를 잃을 때 실행	입력 필드(input, textarea 등)
onmouseover	마우스를 요소 위로 올릴 때 실행	모든 HTML 요소
onmouseout	마우스를 요소 밖으로 이동할 때 실행	모든 HTML 요소
onsubmit	폼이 제출될 때 실행	폼 요소(form)
onkeydown	키보드를 누를 때 실행	입력 필드(input, textarea 등)
onkeyup	키보드를 뗄 때 실행	입력 필드(input, textarea 등)