바닥코딩

event 본문

JavaScript/JQuery

event

개발공부개발공부 2020. 3. 9. 10:59

이벤트란?

 이벤트란 시스템에서 일어나는 사건을 의미합니다. 예를 들어 클릭을 한다던가 마우스를 이동한다던가 타이핑을 친다던가 페이지를 새로 로딩한다는 이런 상황들이 이벤트 입니다. 이런 이벤트가 발생했을 경우 작동할 로직을 미리 시스템에 알려준다면 그 시스템은 이벤트가 발생할 때 이 로직을 호출하게 됩니다.

 간단하게 button을 클릭했을 때 alert  창을 띄우는 로직을 만든다면 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<input id ="event_click" type="button" value="click_me"/>
	<script type="text/javascript">
	  function clickHandler(e)
	  {
	  	alert("클릭해주셔서 감사합니다 ");
	  }
	  $("#event_click").click(clickHandler);
	</script>
</body>
</html>

버튼을 클릭했을때 function으로 설정해 놓은 로직의 내용을 수행하는 것을 확인할 수 있습니다. 지금은 간단하게 click으로만 예를 들어지만 여러 이벤트에 대한 정의가 많으니 필요에따라 찾아 로직을 매핑해 주면 됩니다.

event 종류

◆ jQuery 마우스 이벤트

이벤트 설명
click 노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생
dblclick 노드를 더블 클릭 했을 때에 발생
hover mouseenter와 mouseleave 이벤트를 한번에 bind한다.
mousedown 노드 영역에서 마우스를 눌렀다가 떼었을 때에 발생
mouseenter 노드에 마우스가 진입했을 때에 발생(자식노드에서는 이벤트를 감지 못함)
mouseleave 마우스가 노드에서 벗어났을 때에 발생
mousemove 노드 영역에서 마우스를 움직였을 때에 발생
mouseout 노드에서 마우스 포인터가 떠났을 때에 발생
mouseover 노드 영역에서 마우스를 올려놓았을 때 발생 (내부노드까지 이벤트를 감지)
mouseup 마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생
toggle click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행

 

◆ jQuery 문서로딩 이벤트

이벤트 설명
ready 해당 페이지가 로딩되었을 때에(처음 읽힐 때에) 발생
unload 해당 페이지를 빠져나갈 때에 발생

 

◆ jQuery 폼 이벤트

이벤트 설명
blur 노드에서 포커스가 떠날 때에 발생
change 노드의 값이 변경될 때에 발생
focus 노드가 포커스를 획득했을 때에 발생
select 유저가 텍스트를 선택했을 때에 발생
submit 폼의 내용을 전송할 때에 발생

 

◆ jQuery 키보드 이벤트

이벤트 설명
keydown 해당 영역에서 키보드를 눌렀을 때에 발생
keypress 해당 영역에서 키보드를 계속 누르고 있을 때에 발생
keyup 해당 영역에서 키보드를 눌렀다가 떼었을 때 발생

 

◆ jQuery 웹 브라우저 이벤트

resize 웹브라우저 윈도우 사이즈의 변화가 있을 때
scroll 스크롤이 움직일 때에 발생

 

저작자표시

'JavaScript > JQuery' 카테고리의 다른 글

Ajax  (0) 2020.03.09
엘리먼트를 제어하는 법  (0) 2020.03.09
chain, traversing  (0) 2020.03.09
선택자  (0) 2020.03.06
[tool 소개]sublime Text3  (0) 2020.03.06
'JavaScript/JQuery' Related Articles more