gabiadesign | 디자이너가 공부하는 jquery – 02
32400
single,single-post,postid-32400,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
img_j02

디자이너가 공부하는 jquery – 02

Chain

 

체인은 jQuery 함수를 사용하여 현재 선택된 요소(즉, jQuery 함수로 현재 감싸져 있는 요소)에
jQuery 메서드를 끝없이 연결하여 적용할 수 있게 하는 기법이다. 내부적으로 각 메서드들은 항상
jQuery 메서드가 적용되기 전에 선택된 요소를 반환하는데, 그렇기에 체인을 계속 이어갈 수 있는 것이다.

jQuery(‘div’).hide(); // 페이지의 모든 div를 숨김
jQuery(‘div’).text(‘new contents’); // 모든 div의 내부 텍스트를 변경
jQuery(‘div’).addClass(“updatedContent”); // div에 updatedContent 클래스를 추가
jQuery(‘div’).show(); // 페이지에 모든 div를 나타냄.

 

체인개념으로 인해 아래와 같이 변경됩니다.
jQuery(‘div’).hide()
.text(‘new contents’)
.addClass(“updatedContents”)
.show();

 

예제1. jQuery를 이용해서 코딩하는 경우 (컨텍스트 유지)

 

예제2. javascript의 DOM을 이용해서 코딩하는 경우

 

chain의 장점
-코드가 간결해진다.
-인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.

 

탐색(traversing)

Traversing에 나열되어 있는 jQuery 메서드들은 jQuery의 선택자를 기준으로 하여 새로운 노드를 찾아가는 방법을 제공한다.

-chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
-너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다.

[참고사이트]
http://api.jquery.com/category/traversing/
taeyo.net jQuery traverse 강좌

 

예제3. traversing을 이용해서 chain안에서 대상을 움직일 수 있다.

 

 

 

event

 

이벤트란?
-시스템에서 일어나는 사건을 의미
-javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
-이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.


jQuery의 이벤트

-크로스브라우징의 문제를 해결해줌
-click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
-live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음

 

jQuery가 제공하는 이벤트 관련 메서드

bind( type, data, fn )
매치된 요소에 이벤트 처리기를 바인딩한다. type에는 이벤트 명칭을, data에는 부가적으로 전달할 데이터 개체(Json)를, fn 에는 이벤트 처리기 함수를 작성하면 된다.

unbind( type, fn )
매치된 요소에서 지정된 이벤트와 매핑된 모든 처리기들을 제거한다. bind 메서드와 상반되는 메서드이다

one( type, data, fn )
매치된 요소에 오직 한번만 실행되는 이벤트 처리기를 바인딩한다

trigger( event, data )
매치된 요소의 특정 이벤트를 트리거한다.

특정 개체에게 이벤트 매핑이 필요하다면 bind 메서드를 사용해서 해당 이벤트와 처리기를 등록. 이벤트 매핑을 제거하고 싶다면, unbind를 사용해서 매핑을 제거할 이벤트를 지정.

 

jQuery 이벤트 처리 방식

1.객체에 직접 이벤트를 등록

 

2.bind 메서드를 이용하여 등록

 

2-1.다수의 이벤트를 한 번에 설정하기

 

3.이벤트 제거

4. hover 이벤트

 

이벤트 흐름 및 차단

1. 이벤트 흐름

이벤트 흐름이란, 이벤트가 전달되는 단계 또는 순서
문서 구조의 <div> 요소 안에 <a> 요소가 있다고 가정할 때 <a> 요소에 click 이벤트가 발생하면 <a> 태그도 click 이벤트를 감지할 수 있고, <div> 요소도 감지할 수 있다.

이벤트의 흐름은 크게 세 가지로 나누어 볼 수 있다.
1) capture 단계: 부모 노드에서부터 target 노드 전까지를 의미한다.
2) target 단계: 현재 클릭한 마지막 자식 노드를 의미한다.
3) bubbling 단계: target 노드부터 조상 노드까지를 의미한다.

 

2.이벤트 차단

이벤트 차단이란, 이벤트의 흐름을 막는 것을 말한다. 이는 여러 개의 중첩 요소가 있는 구조에 이벤트가 발생했을 때에 이벤트의 흐름이 더 이상 진행되지 못하도록 차단하는 것으로, jQuery에서는 이벤트 차단을 위해 stopPropagation( ) 메서드를 제공한다.