-
이벤트 핸들러 (EventHandler)JavaScript 2022. 2. 11. 15:20
이벤트 핸들러 (EventHandler)
이벤트(Event) 란?
- 이벤트는 웹 브라우저에서 DOM 요소와 사용자가 상호작용하는 것을 의미한다.
- 사용자가 버튼을 클릭하거나 입력창에 정보를 입력하거나 하는 행위들은 모두 이벤트로 볼 수 있다.
- 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.
이벤트 핸들러(EventHandler) 란?
- 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수
- 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
이벤트 핸들러 등록 방법
- 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 페이지나 이미지를 읽어오는 중 오류가 발생할 시 // EX) HTML 요소로 버튼을 만들고 이벤트 처리 함수(onclick)를 등록하는 방법 //<script> function handleclickBtn() { let time = new Date() console.log(time.toLocalString()) } //<body> <input type='button' value='click' onclick='handleclickBtn()'>
- 이벤트 처리 함수 종류
- DOM 요소의 프로퍼티로 등록하는 방법
- DOM(Document Object Model)은 자바스크립트 등의 프로그램이 HTML 요소를 조작할 수 있도록 제공되는 인터페이스이다.
- 화면에 문자열을 출력하기 위해 사용되는 “document.write()” 함수의 **“document”**가 DOM의 객체이고, “window” 객체 역시 DOM의 주요 객체이다.
// EX) window 객체와 document 객체를 이용하여 이벤트 처리 함수 등록 방법 //<script> function handleclickBtn() { let time = new Date() console.log(time.toLocalString()) } window.onload = function() { let button = document.getElementById("button") button.onclcik = handleclickBtn } //<body> <input type='button' value='click' id='button'> - window.onloae 프로퍼티는 웹 브라우저가 HTML 문서를 다 읽었을 때 호출될 함수를 저장한 프로퍼티이다.
- document 객체를 통해 ‘button’라는 id를 가진 요소를 불러와 ‘button’ 변수에 저장하고, onclick 프로퍼티에 이벤트 처리 함수인 handleclickBtn() 함수를 등록한다.
- addEventListener 메서드를 사용하는 방법
// addEventListener() 사용 방법 target.addEventListener(type, listener(e), useCapture) - target은 등록할 요소(document에서 읽어온 input 요소 : button ), type은 이벤트 타입( : onclick), listener은 등록할 이벤트 핸들러( : handleclickBtn), useCapture는 이벤트 단계 중 캡쳐링 단계 실행 여부 (true, false) 이다.
// EX) 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'>
- target은 등록할 요소(document에서 읽어온 input 요소 : button ), type은 이벤트 타입( : onclick), listener은 등록할 이벤트 핸들러( : handleclickBtn), useCapture는 이벤트 단계 중 캡쳐링 단계 실행 여부 (true, false) 이다.
반응형'JavaScript' 카테고리의 다른 글
var, let, const 차이 (0) 2022.02.14 페이지 처리 (0) 2022.02.11 비동기적 방식 처리 방법 (Callback, Promise, async &await) (0) 2022.02.11 비동기 프로그래밍 (0) 2022.02.11 JavaScript 동작원리 (0) 2022.02.07