JavaScript
이벤트핸들러 EventHandler (JavaScript)
by yororing
2024. 7. 1.
00 개요
- 목적: FastAPI를 웹 프레임워크로 사용하는 프로그램에서 종료 이벤트를 다루는 함수를 정의할 때 '핸들러'라는 표현이 사용되길레 '이벤트 핸들러'가 무엇인지 정리하기 위함
01 이벤트 핸들러 (EventHandler)
1. 이벤트(Event)의 정의
- 웹 브자우저에서 DOM 요소와 사용자가 상호작용하는 것을 의미
- DOM: 'Document Object Model,' HTML 또는 XML 문서의 프로그래밍 인터페이스, 즉 웹 문서의 구조화된 표현, HTML 또는 XML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조
- 사용자가 버튼을 클릭하거나 입력창에 정보를 입력하거나 하는 행위들은 모두 이벤트로 볼 수 있음
- 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여 웹 브라우저가 그 사실을 알려주는 것을 의미
2. 이벤트 핸들러(EventHandler)의 정의
- 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수
- 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행함
3. 이벤트 핸들러 등록 방법
1) HTML 요소의 속성으로 등록
| 이벤트 처리 함수 종류 |
설명 |
| onclick |
마우스 클릭 시 |
| ondbclick |
마우스 더블 클릭 시 |
| onmousedown |
마우스 버튼 누를 시 |
| onmouseup |
마우스 버튼에서 손 뗄 시 |
| onmouseout |
마우스 포인터가 요소를 벗어날 시 |
| onmousemove |
마우스 포인터가 요소 위에서 움직일 시 |
| onmouseover |
마우스 포인터가 요소 위에 올라왔을 시 |
| onkeydown |
키보드 누를 시 |
| onkeypress |
키보드를 누르고 손가락을 뗄 시 |
| onkeyup |
키보드 키에서 손가락을 뗄 시 |
| onchange |
input 요소 값이 바뀔 시 (변경된 이후, 포커스를 잃을 때) |
| oninput |
input 요소 값이 바뀔 시 (바뀐 직후) |
| onblur |
input 요소에서 focus를 잃을 시 |
| onfocus |
input요소에서 focus가 주어질 시 (커서가 들어올 때) |
| onsubmit |
폼 제출 버튼 누를 시 |
| onload |
해당 페이지가 처음 읽힐 시 (브라우저에서 문서를 읽을 때) |
| onunload |
해당 페이지를 나갈 시 (브라우저에서 문서를 닫을 때) |
| onabort |
페이지나 이미지 읽어오기가 중단됐을 시 |
| onerror |
페이지나 이미지를 읽어오는 중 오류가 발생할 시 |
// 예) HTML 요소로 버튼을 만들고 이벤트 처리 함수 (onclick) 등록하기
//<script>
function handleclickBtn() {
let time = new Date()
console.log(time.toLocalString())
}
//<body>
<input type='button' value='click' onclick='handleclickBtn()'>
2) DOM 요소의 properties로 등록
- DOM(Document Object Model)은 JavaScript 등의 프로그램이 HTML 요소를 조작할 수 있도록 제공되는 인터페이스
- 화면에 문자열을 출력하기 위해 사용되는 'document.write()' 함수의 **'document'**가 DOM의 객체이고, 'window' 객체 역시 DOM의 주요 객체임
// 예) window 객체와 document 객체를 이용하여 이벤트 처리 함수 등록하기
//<script>
function handleclickBtn() {
let time = new Date()
console.log(time.toLocalString())
}
window.onload = function() {
let button = document.getElementById('button')
button.onclick = handleclickBtn
}
//<body>
<input type='button' value='click' id='button'>
- window.onload라는 property는 웹 브라우저가 HTML 문서를 다 읽었을 때 호출될 함수를 저장한 property임
- document 객체를 통해 'button'이라는 id를 가진 요소를 불러와 'button' 변수에 저장하고, onclick이라는 property에 이벤트 처리 함수인 handleclickBtn() 함수를 등록함
3) addEventListener 매서드 사용
// addEventListener() 사용 방법
target.addEventListener(type, listener(e), useCapture)
- target은 등록할 요소 (document에서 읽어온 input 요소: button) , type은 이벤트 타입(:onclick), listener는 등록할 이벤트 핸들러 (: handleclickBtn), useCapture는 이벤트 단계 중 캡쳐링 단계 실행 여부 (true, false)임
// 예) addEventListener 매서드 사용하기
//<script>
function handleclickBtn() {
let time = new Date()
console.log(time.toLocalString())
}
window.onload = function() {
let button = document.getElementById('button')
button.addEventListener('click', handleclickBtn, false)
}
//<body>
<input type='button' value='click' id='button'>
참조
- https://hi-zini.tistory.com/entry/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC-EventHandler
-
-