목차
- Event 개념
- 문서 객체 모델 (DOM: Document Object Model) 주요 이벤트
- Event 구문
- Event 메서드 종류
- e 매개변수를 되도록이면 명시적으로 전달해야 하는 이유
Event 개념
1.
jQuery는 HTML 이벤트에 반응하도록 제작되었음.
2.
HTML 이벤트란, 웹페이지의 반응을 유도하는 접속자들의 다양한 행동 (=action)을 말함.
(예)
ⓐ 해당 요소 위로 마우스 커서를 올리는 경우
ⓑ 라디오 버튼을 선택하는 경우
ⓒ 해당 요소를 클릭하는 경우.
즉,
$("선택자").이벤트(); 에서 이벤트 상황이 벌어졌을 때,
선택한 해당 선택자에 미리 정의해둔 메서드 (=메서드)이 일어나게 됨.
※ 「이벤트가 발생한다.」 / 「이벤트가 발생했다.」 표현을 자주 사용할테니, 잘 숙지하셈!!
(예)
키보드를 누르는 순간, 키보드 누르는 이벤트가 발생.
마우스를 클릭하는 순간, 마우스 클릭 이벤트가 발생.
문서 객체 모델 (DOM: Document Object Model) 주요 이벤트
Event 구문
// 실행할 method 내용
});
※ selector : 선택자
※ event() : 이벤트 메서드.
※ fucntion() { ... } : 이벤트 발생 시, 실행할 내용.
[예제] - p 요소 클릭 시, p 요소 숨기기.
$("p").click(function(){
});
PS.
JQ에서, 대부분의 DOM 이벤트 (Event)는 등가의 메서드(Method) 갖음.
(즉, Event = Method 성립)
즉, 이벤트 정의 후, 그 이벤트 발생시 실행될 Method 정의함.
※ Method는 함수로 주로 표현.
Event 메서드 종류
click()
선택된 요소를 마우스 왼쪽 버튼이나 스크롤 바퀴 (=중앙 버튼) 클릭했을 때 작동.
※ 오른쪽 버튼 제외
dblclick()
선택된 요소를 마우스 왼쪽 버튼이나 중아 버튼으로 더블클릭했을 때 작동.
mousedown()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 눌러졌을 때 작동.
※ 오른쪽 버튼 포함
mouseup()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 누른 걸 풀 때 작동해라.
hover()
선택된 요소 위로 마우스 커서가 들어올 때와 나갈 때 작동.
※ hover() = mouseenter() + mouseleave()
focus()
선택된 폼 필드 요소가 focus (=현재 선택된 상태)일 때 작동.
blur()
선택된 폼 필드 요소가 focus (=현재 선택된 상태) 해제될 때 작동.
on()
선택된 요소에 하나 이상의 이벤트 메서드을 실행시킬 때 사용 함.
그외도 아주 많은 이벤트 메서드 있음. 더 자세한 건 나중에 소개.
e 매개변수를 되도록이면 명시적으로 전달해야 하는 이유
[예제]
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('click','.box',function(e){
$(this).find('img.hz').replaceWith('<p">홈짱닷컴 Homzzang.com</p>');
});
</script>
<div class="box">
<img src="https://i.imgur.com/WfW5mBC.png" alt="홈짱" class="hz">
</div>
결과보기
e 매개변수 의미
1. e 매개변수는 이벤트 객체임.
2. e 매개변수는 이벤트 트리거에 대한 정보를 담고 있음.
(예)
- 이벤트 유형 (click와 같은)
- 이벤트가 발생한 요소
- 마우스 좌표 (clientX 및 clientY)
- Ctrl, Shift, Alt와 같은 누른 키
- 마우스 버튼 정보 (which 속성)
- 등등
e 매개변수를 전달해야 하는 이유
당장의 코드엔 필요 없더라도, 코드 일관성과 추후 이벤트를 효과적으로 제어 가능하기 때문. (예)
