자바스크립트 이벤트 태그 정리

안녕하세요.

자바스크립트 이벤트의 개념 및 이벤트 함수의 종류와 쓰임에 대해 알아보도록 하겠습니다. 

 

자바 스크립트 이벤트 (event)

 

먼저 자바스크립트에서의 이벤트란 무엇일까요?

이벤트란 웹 브라우저가 알려주는 HTML/JSP 요소에 대한 사건의 발생이라고 할 수 있습니다. 

웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다. 

이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있습니다. 

 

자주 쓰이는 JS 이벤트 함수 종류

 

• change 변동이 있을 때 발생
• click 클릭 시 발생
• focus 포커스를 얻었을 때 발생
• keydown 키를 눌렀을 때 발생 
• keyup 키에서 손을 뗀 경우 발생
• load 로드가 완료되었을 떄 발생
• mousedown 마우스를 클릭했을 때 발생
• mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 
• mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 
• mousemove 마우스가 움직였을 때 발생
• mouseup 마우스에서 손을 뗀 경우 발생 
• select optoin 태그 등에서 선택을 한 경우 발생 

 

브라우저 UI와 상호작용 이벤트

 

• load 웹 페이지가 로드 완료되었을 때 
• unload 웹 페이지가 언로드 될 때 (새로운 페이지를 요청한 경우)
• error 오류를 만났거나 요청한 자원이 없는 경우
• resize 브라우저 창 크기를 조절할 때 
• scroll 사용자가 페이지를 위아래로 스크롤 할 때 

 

키보드 이벤트 - 사용자가 키보드를 작동했을 때 

 

• keydown 사용자가 키를 눌렀을 때 
• keyup 사용자가 키를 뗄 때 
• keypress 사용자가 눌렀던 키의 문자가 입력된 경우 

 

마우스 이벤트 - 사용자가 마우스로 화면을 작동시킬 때 

 

• click 사용자가 마우스를 클릭했을 때 
• dbclick 두 번 클릭되었을 때 
• mousedown 마우스 버튼을 누르고 있을 때 
• mouseup 눌렀던 마우스 버튼을 뗄 때 
• mousemove 마우스를 움직였을 때 
• mouseover 요소 위로 마우스를 움직였을 때 
• mouseout 요소 밖으로 마우스를 움직였을 때 

 

폼 이벤트

 

• input <input>, <textarea> 태그의 요소 값이 변경된 경우
• change 선택버튼, 체크박스, 라디오 버튼 등 상태가 변경된 경우
• submit 버튼 키를 이용해서 폼을 제출할 때 
• reset 리셋 버튼을 클릭할 때 
• copy 폼 필드의 컨텐츠를 복사했을 때 
• cut 폼 필드의 콘텐츠를 잘라내기 했을 때 
• paste 폼 필드의 콘텐츠를 붙여넣기 할 때
• select 텍스트를 선택했을 때 

 

알아두면 좋은 자바스크립트 이벤트 함수

 

• onabort 이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)
• onactivate 객체가 활성화 될 때 발생(태그의 기능이 작용할 때 발생하는 이벤트로, 예를 들어 링크를 누를 경우 링크가 옮겨질 때 발생하는 것을 감지하는 이벤트 핸들러)
• onbeforeactivate 객체가 활성화 상태로 되기 바로 직전에 발생
• onbeforedeactivate 문서의 현재 객체에서 다른 객체로 activateElement가 바뀔 때 발생
• onbeforeprint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생
• onafterprint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생
• onbeforeupdate 데이터 영역 객체에서 발생하는 이벤트로 데이터 오브젝트 내의 데이터가 업데이트 되기 전에 발생 
• onafterupdate 데이터 영역 객체에서 발생하는 이벤트로 데이터 오브젝트 내의 데이터가 업데이트 되었을 때 발생 
• onbeforecopy 선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
• onbeforecut 선택 영역이 지워지기 바로 직전에 발생
• onbeforepaste 시스템의 클립보드에서 문서로 붙여넣기 될 때 대상 객체에서 발생
• onbeforeeditfocus 편집 가능한 객체 내부에 포함된 객체가 편집 활성화 된 상태가 되거나 혹은 편집 가능한 객체가 제어를 위해 선택될 때 
• onbeforeunload 페이지가 업로드 되기 직전에 발생 
• onblur 객체가 포커스를 잃었을 때 
• onbounce 마퀴 태그에서 alternate 상태에서 스크롤이 양 사이드에서 바운드 될 때 발생 
• oncellchange 데이터 제공 객체에서 데이터가 변화할 때 발생 
• onchange 객체 혹은 선택 영역의 내용이 바뀔 때 발생 
• onclick 객체 위에서 마우스의 왼쪽 버튼을 누를 때 발생
• oncontextmenu 클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴 클릭 시 발생
• oncontrolselect 사용자가 객체의 제어 영역을 만들 때 발생 
• oncopy 시스템의 클립보드에 선택영역 혹은 객체를 복사할 때 객체로부터 발생
• oncut 시스탬의 클립보드에 선택영역 혹은 객페를 잘라낼 때 객체로부터 발생
• ondataavailable 비정기적으로 데이터를 전달하는 데이터 객체로부터 데이터가 도착할 때 마다 정지적으로 발생
• ondatasetchange 데이터 객체의 변화에 의해 데이터가 노출된 상태로 될 때 발생 
• ondatasetcomplete 데이터 객체로부터 모든 데이터가 유용한 상태로 표시될 때 발생 
• ondbclick 사용자가 객체에 더블클릭시 발생 
• ondeactivate 문서에서 현재 객체에서 다른 객체로 activeElement가 변할 시 발생
• ondrag 드래그 상태가 지속되는 동안 객체로부터 발생
• ondragend 드래그 상태가 끌날 때 객체로부터 발생
• ondragenter 사용자가 객체를 드래그하여 드롭가능 위치 혹은 지정된 영역으로 이동할 때 타깃 객체에서 발생 
• ondragleave 사용자가 객체를 드래그하여 드롭가능 위치 혹은 지정된 영역을 떠날 때 타깃 객체에서 발생
• ondragover 사용자가 객체를 드래그 하여 드롭가능 위치 혹은 지정된 영역에서 드래그할 때 계속적으로 타킷 객체에서 발생
• ondragstart 선택된 객체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생
• ondrop 드래그앤드롭 작용에서 상태가 진행되는 동안 객체가 타깃 객체에 드롭되었을 때 타깃 객체에서 발생
• onerror 객체가 로드되는 동안 발생하는 이벤트 
• onerrorupdate 데이터 객체 내에 데이터가 업데이트 되는 동안 에러가 발생할 때 데이터 영역 객체에서 발생
• onfilterchange 비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 떄 바랫ㅇ
• onfinish 마퀴 객페의 loop가 완료되었을 때 발생
• onfocus 객체가 포커스를 받았을 때 발생
• onfocusin 객체에 포커스가 세팅되기 바로 직전 객체에 대해 발생
• onfocusout 포커스가 다른 객체로 이동한 후에 포커스가 가고 있는 현재 객체에서 발생
• onhelp 브라우저가 활성화 되어 있는 동안 F1 키를 눌렀을 때 발생 
• onkeydown 사용자가 키를 눌렀을 때
• onkeypress 기능키를 제외한 키를 눌렀을 때 발생 
• onkeyup 사용자가 키를 놓았을 때 발생
• onlayoutcomplete 문서로부터 콘텐츠를 가지는 객체가 미리보기나 출력 시 현재 layourect 객체를 모두 채우는 것이 끝났을 때 발생
• onload 브라우저가 객체를 로드한 후에 발생
• onlosecapture 객체가 마우스 캡처를 잃었을 때 발생
• onmousedown 객체 위에 마우스 버튼을 누를 때 발생 (좌우 상관 x)
• onmouseenter 객체 안으로 마우스 포인터가 들어올 때 발생
• onmouseleave 객체의 경계 밖으로 마우스 포인터가 이동할 때 발생
• onmousemove 객체 위에서 마우스가 움직일 때 발생
• onmouseout 객체 밖으로 마우스 포인터가 빠져나갈 때 발생
• onmouseover 객체 위로 마우스 포인터가 들어올 때 발생
• onmouseup 마우스가 객체 위에 있는 동안 마우스를 누른 상태에서 해제될 때 발생
• onmousewheel 마우스 휠이 돌아갈 때 발생
• onmove 객체가 움직일 때 발생 
• onmoveend 객체의 움직임이 끝날 때 발생 
• onmousestart 객체가 움직이기 시작할 때 발생 
• onpaste 문서에 클립보드로부터 데이터가 전송될 때 타깃 객체에서 발생
• onpropertychange 객체의 속성이 바뀔 때 발생
• onreadystatechange 객체의 상태가 변화할 때 발생
• onreset 폼을 사용자가 리셋할 경우 발생 
• onresize 객체의 크기가 바뀔 때 발생
• onresizeend 제어 영역에서 객체의 크기가 사용자에 의해 변화가 끝날 때 발생 
• onresizestart 제어 영역에서 객체의 크기가 사용자에 의해 변화되기 시작할 때 발생
• onrowenter 데이터 내에서 현재 열이 변화되거나 객체에 새로운 유용한 데이터가 입력될 때 발생
• onrowexit 데이터 컨트롤이 객체 내의 현재 열을 변화시킬 때 발생 
• onrowsdelete 레코드 셋에서 열이 삭제될 때 발생
• onrowsinserted 현재 레코드 셋에 새로운 열이 추가된 후에 발생 
• onscroll 사용자가 객체 내의 스크롤 바를 스크롤 시 발생
• onselect 현재 선택된 영역이 바뀔 때 발생
• onselectionchange 문서의 선택 영역의 상태가 바뀔 때 발생 
• onselectstart 객체가 선택되기 시작할 때 발생
• onstart 마퀴 객체에서 loop가 시작될 때 발생 
• onstop 사용자가 stop 버튼을 눌렀을 경우, 혹은 페이지를 떠날 때 발생
• onsubmit 폼이 전송되기 바로 전에 발생 onload
• onunload 객체가 업로드 되기 직전에 발생

 

참고 블로그

 

• 이벤트 함수 모음 

[JAVASCRIPT] 자바스크립트 이벤트 함수 모음

• 이벤트 함수 종류별 구분 

JS 이벤트 메서드 addEventListener 이벤트리스너 종류 모음