HTML 이벤트 총 정리

반응형

Event

 

 

jQuery 홈페이지에 .on 메소드를 보던 중

.on (events [, selector] [, data], handler)

이런 식으로 나와있었다.

 

여기서 말하는 events 칸엔 뭘 적는 걸까? 그렇다 바로 그것을 알아보겠습니다.

(무조건 .on 메소드만 이벤트를 쓸 수 있는 것이 아니라 이해를 돕기 위해 예시로 사용한 것입니다.)

 

 

자주 쓰는 jQuery Event

예시

jQuery

문법 1.$("#staticP").on({ "click": function() { alert("click!"); } });

문법 2.$(document).on('change','#staticSB',function(){ alert("change"); })

문법 3.$('#staticP').click(function() { $('#staticP').mouseleave(); });

jQuery 한 태그의 여러 이벤트 걸기

$("#staticP").on({ "click": function() { alert("click!"); },
		"mouseenter": function() { alert("mouseenter"); }, 
		"mouseleave": function() { alert("mouseleave"); }, 
		"copy": function() {alert("copy")},
		"cut": function() {alert("cut")}
		});

※주의 : 한 이벤트 문법이 끝날 때마다 ","(콤마)를 찍어야 한다.

 

마우스 관련

이벤트

설명

click

노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생

dblclick

노드를 더블 클릭 했을 때에 발생

hover

mouseenter와 mouseleave 이벤트를 한 번에 bind 한다.

mousedown

노드 영역에서 마우스를 눌렀다가 떼었을 때에 발생

mouseenter

노드에 마우스가 진입했을 때에 발생(자식 노드에서는 이벤트를 감지 못함)

mouseleave

마우스가 노드에서 벗어났을 때에 발생

mousemove

노드 영역에서 마우스를 움직였을 때에 발생

mouseout

노드에서 마우스 포인터가 떠났을 때에 발생

mouseover

노드 영역에서 마우스를 올려놓았을 때 발생 (내부 노드까지 이벤트를 감지)

mouseup

마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생

toggle

click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행


폼 관련

이벤트

설명

blur

노드에서 포커스가 떠날 때에 발생

change

노드의 값이 변경될 때에 발생

focus

노드가 포커스를 획득했을 때에 발생

select

유저가 텍스트를 선택했을 때에 발생

submit

폼의 내용을 전송할 때에 발생


키보드 관련

이벤트

설명

keydown

해당 영역에서 키보드를 눌렀을 때에 발생

keypress

해당 영역에서 키보드를 계속 누르고 있을 때에 발생

keyup

해당 영역에서 키보드를 눌렀다가 떼었을 때 발생


문서 로딩 관련

이벤트

설명

ready

해당 페이지가 로딩되었을 때에(처음 읽힐 때에) 발생

unload

해당 페이지를 빠져나갈 때에 발생


웹 브라우저

이벤트

설명

resize

웹브라우저 윈도 사이즈의 변화가 있을 때

scroll

스크롤이 움직일 때에 발생

 

- 출처 : 란쯔 스토리


HTML Event

예시

jQuery

$("#staticP").on({
"copy": function() {alert("복사를 금지 합니다.")}, 
"cut": function() {alert("잘라내기를 금지 합니다.")} 
});

※주의 : jQuery로 사용 시 앞에 "on" 단어를 빼고 사용합니다.

 

HTML

<input type="text" oncopy="myFunction()" value="Try to copy this text">
<input type="text" oncut="myFunction()" value="Try to cut this text">

HTML 한 태그의 여러 함수 걸기

<button type="button" onclick="fun1(); fun2(); fun3();">

";"(세미콜론)으로 구분해서 함수를 여러개 연결 시킬 수 있다. 

 

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

+ Recent posts