hacosa j query 8th

16
HACOSA jQuery STUDY #8. 이이이

Upload: seong-bong-ji

Post on 25-Jan-2015

617 views

Category:

Documents


4 download

DESCRIPTION

하코사 jQuery 스터디 Ch.8

TRANSCRIPT

Page 1: Hacosa j query 8th

HACOSA jQuery STUDY#8. 이벤트

Page 2: Hacosa j query 8th

소개• 이벤트‒ 사용자와 웹사이트 또는 웹 어플리케이션 간에 소통을 위한 주된 방법‒ 사용자 이벤트 :

click, mousedown, keypress 등과 같은 키보드 및 마우스 상호작용

‒ 브라우저 이벤트 :document.ready, window.onload, DOM 요소와 관련된

수많은 다른 이벤트들

‒ jQuery Ajax 이벤트 :Ajax 요청의 처리동안에 호출되는 ajaxSend, ajaxComplete,

ajaxError등과 같은 사용자 정의 이벤트

Page 3: Hacosa j query 8th

이벤트에 처리기 연결하기• 하나 이상의 이벤트에 대해 동일한 처리기 함수를 바인딩

‒ jQuery 1.4 이상에서는 아래와 같이 개체로 구성 가능

$(‘div’).click(function(e){ alert(‘event’);}).keydown(function(e){ alert(‘event’);});

$(‘div’).bind(‘click keydown’, function(e){ alert(‘event’);});

$(‘div’).bind( { click : function(){ // 작업 }, keydown : function(){ // 작업 }} );

Page 4: Hacosa j query 8th

이벤트에 처리기 연결하기• $().bind() 메소드‒ $().bind( eventType [, eventData], handler(eventObject) )→ eventType :• 이벤트 종류 (click, mouseenter 등 )• 멀티 이벤트 부여 가능• $().bind(“mouseenter focusin”, …. 식으로 사용

→ eventData :• 부가적인 data 매개 변수• 함수 내부에서 event.data 를 통해 접근 가능• 배열 , 문자열 , 숫자 개체 등 어떤 변수든 사용 가능

→ handler :• 이벤트 발생시 실행시킬 처리기

Page 5: Hacosa j query 8th

별개의 데이터를 갖는 처리기 함수 재사용하기

$(“#button1’).click(function(e){ $(‘div.panel’).hide(); $(‘#panel1’).show(); $(‘#desc’).text(‘You clicked the red button’);});$(“#button2’).click(function(e){ $(‘div.panel’).hide(); $(‘#panel2’).show(); $(‘#desc’).text(‘You clicked the blue button’);});$(“#button3’).click(function(e){ $(‘div.panel’).hide(); $(‘#panel3’).show(); $(‘#desc’).text(‘You clicked the green button’);});

function btnClicked(e){ $(‘div.panel’).hide(); $(‘#panel’ + e.data.panel).show(); $(‘#desc’).text(‘You clicked the’ + e.data.color + ‘button’);}

$(‘#button1’).bind(‘click’, {panel : 1, color : ‘red’ }, btnClicked);$(‘#button1’).bind(‘click’, {panel : 2, color : ‘blue’ }, btnClicked);$(‘#button1’).bind(‘click’, {panel : 3, color : ‘green’ }, btnClicked);

Page 6: Hacosa j query 8th

이벤트 처리기 전체를 제거하기• 플러그인을 사용하여 코드를 작성 혹은 단순히 대규모 코드

기반으로 작업을 하는 경우 실수로 다른 연결된 이벤트의 처리기를 제거하지 않도록 네임 스페이스를 사용하여 이벤트를 제거 혹은 부여 .• 특정 네임 스페이스에 속한 모든 유형의 모든 이벤트 제거‒ .myPlugin" 과 같은 네임스페이스를 이용하여 바인딩을 해제$.fn.myPlugin = function(){ return this .bind(‘click.myPlugin’, function(){ // [code] }) .bind(‘mousedown.myPlugin’ , function(){ // [code] });}

$.fn.disposeMyPlugin = function(){ return this.unbind(‘.myPlugin’);}

Page 7: Hacosa j query 8th

특정이벤트 처리기 동작시키기• 앞선 방법과 마찬가지로

다른 연결된 이벤트를 제외한 해당 이벤트를 발생시킬 필요가 있다면네임스페이스를 부여하는 방식을 사용

$.fn.myPlugin = function(){ return this .bind(‘click.myPlugin’, function(){ // [code] }) .bind(‘mousedown.myPlugin’ , function(){ // [code] });}

$.fn.runMyPlugin = function(){ return this.trigger(‘click.myPlugin’);}

Page 8: Hacosa j query 8th

이벤트 처리기에 동적 데이터 전달하기• 처리기를 호출할 때 마다 변하는 데이터를 이벤트 처리기에

전달 하는 방법‒ 추가 매개 변수를 trigger() 에 전달

‒ 사용자 정의 이벤트 개체를 trigger() 에 전달

$(‘form’).bind(‘submit’, function(e, name, surname, age, extra){ // 이 인자들을 사용하여 어떤 작업을 수행});

$(‘form’).trigger(‘submit’, [‘John’, ‘Doe’, 28, {gender : ‘M’}]);

$(‘form’).bind(‘submit’, function(e){ // e.name, e.surname 등으로 어떤 작업 수행});

$(‘form’).trigger({ type : ‘submit’, name : ‘John’, surname : ‘Doe’, age : 28, gender : ‘M’});

Page 9: Hacosa j query 8th

document.ready 이전에 가능한 한 빨리 요소에 접근하기• 페이지가 렌더링 되기 전에 요소를 숨겨서‒ 아직 처리되지 않은 요소들이 사용자 눈에 안 보이도록 처리 ‒ document.ready 이전에 DOM 컨트롤과는 전혀 무관한 방법 소개 임

#8.6(p.273) 첫번째 예제 참고→ 자바스크립트가 인터프리터 언어라는 걸 이용해서 ..

스크립트에 앞서 정의된 <html> 요소에 스크립트를 만나자 마자 클래스를 주어서 #message 요소를 CSS 를 통해 숨기는 방식 . 특별한 것은 없음… ..제목과는 그다지 관계 없는 내용… .

Page 10: Hacosa j query 8th

document.ready 이전에 가능한 한 빨리 요소에 접근하기• 가능한 한 빨리 요소에 이벤트 처리기 바인딩‒ 이벤트 위임→ 이벤트 버블링을 효과적으로 이용한 방법→ jQuery 1.3 부터 jQuery Core 에 추가되어 있음

‒ live() method→ 동적으로 이벤트를 바인딩 하는 방법→ 동적으로 생성된 요소에 대한 이벤트 바인딩이 필요할 때 사용함

• 폴링‒ 요소를 검사하여 요소가 발견되면 특정 함수를 실행하고 검사 종료→ LiveQuery, ElementReady 플러그인

• </body> 태그 앞에 스크립트를 위치 시키는 것= document.ready 를 사용한 결과와 동일

Page 11: Hacosa j query 8th

처리기 실행 루프 중단하기• event.stopImmediatePropagation‒ 이어지는 이벤트 처리기들이 현재 이벤트에 통지되지 않게 함$(‘form’).submit(function(e){ e.preventDefault(); // 실제로 submit 하지 않음 if($(‘#field’).val() == ‘’ ) e.stopImmediatePropagation();}).submit(function(e){ // 함수가 위의 e.stopImmediatePropagation 을 호출하지 않는다면 실행된다 .}

Page 12: Hacosa j query 8th

event.target 을 사용하여 정확한 요소 얻기

• event.target 속성은 이벤트를 가지고 있는 특정 요소를 참조• 이벤트 위임을 사용하지 않은 경우 this 나 event.current-Target 를 사용 할 수 있다• 이벤트 위임을 사용할 수 밖에 없다면 예상하는 부모 요소를

찾아야 할 필요가 있으며 이를 위해 closest() 를 사용할 수 있다

Page 13: Hacosa j query 8th

event.target 을 사용하여 정확한 요소 얻기

• Event Bubble 알고 갑시다 !!‒ Event Handler 는 캡쳐 핸들러와 버블 핸들러로 구분‒ Event 가 발생이 되면 Event Capture → Event Bubble 발생‒ 발생된 이벤트를 캡쳐 하기 위해 이벤트가 발생한 요소를 포함하는 부모

HTML 부터 이벤트의 근원지인 자식 요소까지 이벤트를 검사 . 이때 , 캡쳐 속성의 이벤트 핸들러가 있다면 실행시키면서 이벤트 요소로 접근한다 .이렇게 이벤트의 근원을 Top → Down 방식으로 찾아가는 단계를 Event Capturing 이라 함 .

‒ 이벤트 요소에 도달 했다면 이제 다시 이벤트 요소로부터 이벤트 요소를 포함하고 있는 부모 요소까지 올라가며 이벤트를 검사 . 이때 버블 속성의 이벤트 핸들러가 있다면 실행시킨다 .이렇게 이벤트가 Buttom → Up 방식으로 부모 요소로 올라오며 이벤트가 실행 되는 것을 Event Bubbling 이라 함

‒ 보통 기본 이벤트 핸들러는 버블 속성임‒ http://blog.javarouka.me/2011/12/html-event-bubbling.html 참고

Page 14: Hacosa j query 8th

동시에 여러 개의 hover() 애니메이션이 수행되지 못하도록 하기

‒ 마우스를 빠르게 움직이면 요소가 갑자기 애니메이션을 반복하는 것을 볼 수 있다 . 이를 해결 하기 위한 방법으로 새로운 애니메이션을 생성하기 전에 요소에 존재하는 기존 애니메이션을 stop() 메서드로 중지시키는 것

$(‘#something’).hover( function(){ // 애니메이션 추가 }, function(){ // 초기상태로 애니메이션 되돌리기 });

$(‘#something’).hover( function(){ $(this).stop().animate({opacity:1}, 1000); }, function(){ $(this).stop().animate({opacity:0.8}, 1000); });

Page 15: Hacosa j query 8th

새롭게 추가된 요소에서도 동작하는 이벤트 처리기 만들기

• Ajax 요청이나 jQuery 연산에 의해 새로운 요소가 동적으로 추가된 후 이벤트 처리기가 동작하지 않을 때 이를 해결 하기 위한 방법‒ 재 바인딩→ 새로운 요소가 추가될 때마다 bind() 메서드를 호출하는 것이다 .→ 구현하기 쉬우며 어떤 플러그인이나 새로운 메서드를 요구하지 않음

‒ 이벤트 위임→ 이 방식은 이벤트 버블링에 의존→ 빠르고 가벼우나 버블링에 대해 어느 정도 이해하고 있어야 하며 다루기가

까다롭다 . jQuery 1.3 이후 버전에서는 이벤트위임에 대한 지원이 내장되어 있으며 live() 메서드를 사용

Page 16: Hacosa j query 8th

END