[JQUERY] 실행 시점

 

on( ) : 특정 사건이 발생하는 시점에 실행할 명령을 설정하는 메소드

- on( ) 메소드의 첫 번째 매개변수는 이벤트 타입을, 두 번째 매개 변수는 이벤트 핸들러를 전달

on('이벤트 타입' . '이벤트 핸들러');

- 이벤트 : 특정 사건

- 이벤트 타입 : 이벤트 유형

- 이벤트 핸들러:  실행하려는 명령(함수)

 

주요 이벤트 타입

이벤트 타입	해당 시점
mouseover	요소에 마우스 포인터를 올려놓았을 때
mouseout	요소에서 마우스 포인터가 벗어날 때
mousedown	요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭할 때
mouseup	요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭했다가 땔 때
mousemove	요소 안에서 마우스 포인터를 움직일 대
click	요소를 클릭했을 때
dbclick	요소를 더블 클릭 했을 때
keydown	요소에 초첨을 맞춘 상태에서 키보드의 키를 눌렀을 때
keyup	요소에 초점을 맞춘 상태에서 키보드의 키를 땔 때
focus	요소에 포커스가 일치했을 때 (포커스가 있는 요소만)
blur	요소가 포커스를 잃어버렸을 때 (포커스가 있는 요소만)
change	입력 내용이 변경되었을 때 (textarea, input, select 등)
scroll	요소를 스크롤했을 때
resize	요소의 크기를 다시 설정했을 때

 

 

이벤트 핸들러

function() {
    //임의 처리 
}

- { } 부분이 임의 처리 됨

$('#선택자').on('이벤트 ', function(){
    // 이벤트
}

- 선택자 : CSS 선택자 지정

- 이벤트 타입 : 임의의 실행 시점을 나타내는 문자열

- 임의 처리 : JavaScript 코드로, ' $('선택자').css('속성', '값'); '형식으로 코드 변경

 

 

메소드 체인 : 메소드를 체인처럼 연결해서 작성하고 실행하는 프로그램 방법

$('#선택자').메소드 A( ).메소드 B( ).메소드 C( )....

- 장점 

1. $( ) 함수를 한 번만 작성해도 됨 -> 코드 단순화

2. 프로그램 처리 속도 향상