Javascript 이벤트 처리

Posted Apr 15, 2022

6 min read

Javascript 이벤트 처리

이벤트란 프로그램이 겪는 어떠한 사건을 말합니다. 웹페이지에게는 사용자의 클릭, 마우스 오버, 페이지 로딩 전후 등의 상황에 해당합니다. Javascript는 이러한 이벤트 상황을 감지하고 적절한 대응을 할 수 있는 코드를 구현할 수 있습니다.

프로그램이 겪는 어떠한 사건.

자바스크립트가 제공하는 브라우저 관련 기능 안에 이미 다양한 이벤트를 감지하는 기능이 구현되어 내장 기능으로 개발자에게 제공된다.

어떤 이벤트가 발생하기를 기다리고 있다가 이벤트 발생시 연결된 함수를 호출해 주는 기능.

이벤트를 감지하는 것은 Javascript 안에 이미 내장되어 있지만 어떤 이벤트가 발생했을 수행할 동작은 웹 페이지마다 다를 수 밖에 없으므로 미리 구현해 놓을 수 없다. (페이지마다 개별 구현이 필요함)

이벤트를 감지하는 기능이 수행할 동작을 콜백함수로 요구한다.

  
객체.addEventListener('이벤트이름', 콜백함수);

HTML 태그의 속성 형태로 존재하는, 이벤트 발생시 실행할 자바스크립트 코드 영역

Javascript가 고도화 됨에 따라 HTML과 Javascript 코드를 분리하는 경향이 생기면서 이벤트 핸들러는 거의 사용되지 않는 추세.

  
<태그이름 on이벤트이름="...JS코드영역..."></태그이름>

자주 사용되는 이벤트만 이번 단원에서 정리

자주 사용되는 이벤트만 이번 단원에서 정리

20단원-Form요소에서 정리함

이벤트	이벤트 핸들러	설 명
submit	OnSumit	입력 양식을 서버로 보냈을 경우 (submit버튼을 누른 경우)
change	OnChange	대상에 입력되어 있는 값이 바뀌었을 경우. 입력상자,체크박스,라디오,드롭다운에 적용
blur	OnBlur	대상에서 포커스가 빠져나간 경우
focus	OnFocus	대상에 포커스가 들어 왔을 경우
reset	OnReset	대상을 재시작 시켰을 경우(주로 form)
select	OnSelect	입력 양식의 한 필드를 선택했을 경우

자주 사용되는 이벤트만 이번 단원에서 정리

This post is licensed under CC BY 4.0 by the author.

Trending Tags