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 | 스크롤이 움직일 때에 발생 |