• 회원가입
  • 로그인

[Event] JQ - event ★ - 이벤트 (= 메서드실행 촉발사건)

목차

  1. Event 개념
  2. 문서 객체 모델 (DOM: Document Object Model) 주요 이벤트
  3. Event 구문
  4. Event 메서드 종류

 

Event 개념

 

1.
jQuery는 HTML 이벤트에 반응하도록 제작되었음. 


2.
HTML 이벤트란, 웹페이지의 반응을 유도하는 접속자들의 다양한 행동 (=action)을 말함.

(예)
ⓐ 해당 요소 위로 마우스 커서를 올리는 경우
ⓑ 라디오 버튼을 선택하는 경우 
ⓒ 해당 요소를 클릭하는 경우.

즉, 

$("선택자").이벤트(); 에서 이벤트 상황이 벌어졌을 때,
선택한 해당 선택자에 미리 정의해둔 메서드 (=메서드)이 일어나게 됨.

※ 
「이벤트가 발생한다.」 / 「이벤트가 발생했다.」 표현을 자주 사용할테니, 잘 숙지하셈!!

(예)
키보드를 누르는 순간, 키보드 누르는 이벤트가 발생.
마우스를 클릭하는 순간, 마우스 클릭 이벤트가 발생.

 

 

문서 객체 모델 (DOM: Document Object Model) 주요 이벤트

Mouse 
Events
Keyboard 
Events
Form 
Events
Document/Window 
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
 

Event 구문

 

$(selector).event(function(){
  // 실행할 method 내용
});

 

selector : 선택자

event() : 이벤트 메서드. 

※ fucntion() { ... } : 이벤트 발생 시, 실행할 내용.


[예제] - p 요소 클릭 시, p 요소 숨기기.

 

$("p").click(function(){
    $(this).hide();
});

 


PS.

JQ에서, 대부분의 DOM 이벤트 (Event)는 등가의 메서드(Method) 갖음.

(즉, Event = Method 성립)
즉, 이벤트 정의 후, 그 이벤트 발생시 실행될 Method 정의함.
※ 
Method는 함수로 주로 표현.

 

 

Event 메서드 종류

 

$(document).ready()
웹페이지가 모두 랜더링 되었을 때 작동

 



click()
선택된 요소를 마우스 왼쪽 버튼이나 스크롤 바퀴 (=중앙 버튼) 클릭했을 때 작동.
※ 오른쪽 버튼 제외

dblclick()
선택된 요소를 마우스 왼쪽 버튼이나 중아 버튼으로 더블클릭했을 때 작동.

 



mouseenter()
선택된 요소 안으로 마우스 커서가 들어올 때 작동.


mouseleave()
선택된 요소 밖으로 마우스 커서가 벗어날 때 작동.


mousedown()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 눌러졌을 때 작동.  
※ 오른쪽 버튼 포함

mouseup()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 누른 걸 풀 때 작동해라.

 



hover()
선택된 요소 위로 마우스 커서가 들어올 때와 나갈 때 작동. 
※ hover() = mouseenter() + mouseleave()

focus()
선택된 폼 필드 요소가 focus (=현재 선택된 상태)일 때 작동.

blur()
선택된 폼 필드 요소가 focus (=현재 선택된 상태) 해제될 때 작동.

on()
선택된 요소에 하나 이상의 이벤트 메서드을 실행시킬 때 사용 함.

 

그외도 아주 많은 이벤트 메서드 있음. 더 자세한 건 나중에 소개.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012