[번역] jquery 기본 자습서(jquery fundamentals) - (다섯 번째 부분) Jquery 이벤트

Jquery 기본 자습서
저자 Rebecca Murphey
원본 링크 주소http://jqfundamentals.com/
With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.
Copyright © 2011
 
Jquery 이벤트
개술
jquery는 선택 결과에 이벤트 프로세서를 추가하는 간단한 방법을 제공합니다.사건이 발생했을 때 제공된 방법이 실행되었다.방법 내부에서this 키워드는 클릭한 요소를 가리킨다.
jqueyr 이벤트에 대한 자세한 정보를 얻을 수 있습니다 http://api.jquery.com/category/events/.
이벤트 처리 함수는 이벤트 대상을 수신할 수 있습니다.이 대상은 이벤트의 특성을 확인하고 이벤트의 기본 행동을 막는 데 사용될 수 있습니다.
이벤트 대상에 대한 자세한 정보를 얻을 수 있습니다http://api.jquery.com/category/events/event-object/.
이벤트 및 요소 연관
jquery는 대부분의 자주 사용하는 이벤트에 편리한 방법을 제공합니다. 이 방법들은 앞으로 가장 자주 사용할 것입니다.이 방법들은--$.fn.click,$.fn.focus,$.fn.blur,$.fn.change, 등--jquery에 대한 $.fn.bind 방법은 속기법이야.이벤트 프로세서에 데이터를 제공하고 싶을 때, 클라이언트 이벤트를 사용할 때, 또는 다중 이벤트와 다중 처리 방법의 대상을 전달하고 싶을 때, Bind 방법은 같은 처리 방법을 여러 이벤트에 연결하는 데 매우 유용하다.
예5.1: 간편한 방법으로 이벤트 귀속

$('p').click(function() {

    console.log('click');

});

예5.2: $.fn.bind 방법으로 이벤트 귀속

$('p').bind('click', function() {

    console.log('click');

});

예 5.3: $.fn.bind 방법으로 데이터를 가진 방법으로 귀속

$('input').bind(

    'click change',  // bind to multiple events

    { foo : 'bar' }, // pass in data

    function(eventObject) {

        console.log(eventObject.type, eventObject.data);

        // logs event type, then { foo : 'bar' }

    }

);

한 번에 실행되는 이벤트 연결
때때로 특별한 처리 방법이 한 번만 실행되어야 할 때가 있다. 그 다음에 처리 방법이 실행되지 않기를 원하거나, 다른 처리 방법이 실행되기를 원한다.jquery에서 $을(를) 제공합니다.fn.원 방법으로 이 목적을 완성한다.
예제 5.4: $.fn.원 변환 처리 방법

$('p').one('click', function() {

    console.log('You just clicked this for the first time!');

    $(this).click(function() { console.log('You have clicked this before!'); });

});

   $.fn.원 방법은 원소가 첫 번째 클릭에 의해 복잡한 설정을 해야 하는데, 그 다음 클릭이 일어나지 않는 상황에서 특히 유용하다.
분리 이벤트
당신은 $을 통과할 수 있습니다.fn.unbind 방법과 이벤트를 전달하는 형식으로 이벤트와 처리 방법을 분리합니다.만약 이벤트에 이름이 있는 함수를 추가한다면, 이벤트를 분리하는 두 번째 매개 변수로 전달할 수 있습니다.
예5.5: 선택 결과의 모든 클릭 이벤트 처리 해제

$('p').unbind('click');

예5.6: 특정 클릭 처리 해제

var foo = function() { console.log('foo'); };

var bar = function() { console.log('bar'); };

$('p').bind('click', foo).bind('click', bar);

$('p').unbind('click', bar); // foo is still bound to the click event

이벤트 공간 이름 지정
복잡한 응용 프로그램과 다른 사람과 공유하는 컨트롤에서 당신이 모르거나 알 수 없는 사건에 대한 오류가 해제되는 것을 방지하기 위해서입니다.이벤트에 대한 명칭 공간 설정은 매우 유용하다.
예5.7: 이벤트 공간 이름 지정

$('p').bind('click.myNamespace', function() { /* ... */ });

$('p').unbind('click.myNamespace');

$('p').unbind('.myNamespace'); // unbind all events in the namespace

여러 이벤트 바인딩
응용 프로그램에서 자주 요소에 여러 개의 이벤트를 연결하고, 각각 다른 함수로 이벤트를 처리합니다.이 경우, 키 값을 포함하는 대상을 $에게 전달할 수 있습니다.fn.bind, 대상의 키는 이벤트의 이름값이고 이벤트를 처리하는 함수입니다.예5.8: 여러 이벤트 바인딩

$('p').bind({

    'click': function() { console.log('clicked!'); },

    'mouseover': function() { console.log('hovered!'); }

});

주석:
상례의 방법은 jquery1.4.4에 도입
이벤트 처리 함수 내부
개술에서 우리가 언급한 바와 같이 이벤트 처리 함수는 하나의 대상을 수신하는데, 그것은 많은 속성과 방법을 포함한다.이벤트 대상의 대부분은 기본 차단 방법을 통해 이벤트를 막는 기본 동작에 사용됩니다.이벤트 객체에는 다음과 같은 다양한 유용한 속성과 방법이 포함되어 있습니다.
pageX,pageY
이벤트가 발생할 때 마우스가 페이지의 왼쪽 상단에 있는 위치입니다.
type
이벤트 유형(예: "click")
which
버튼이 눌리거나 버튼이 눌리거나.
data
이벤트가 귀속될 때 임의로 전송되는 데이터
target
이벤트를 시작하는 DOM 요소
preventDefault()
이벤트 방지 기본 작업
stopPropagation()
이벤트가 다른 요소로 유출되는 것을 막다
 
이벤트 대상을 제외하고 이벤트 처리 함수도 키워드this를 통해 처리 함수에 귀속된 DOM 요소에 접근할 수 있습니다.jquery 방법을 적용하기 위해서 우리는 DOM 요소를 jquery 대상으로 바꾸어 $(this)를 간단하게 통과할 수 있다. 다음과 같다.

var $this = $(this);

링크 추적 방지

$('a').click(function(e) {

    var $this = $(this);

    if ($this.attr('href').match('evil')) {

        e.preventDefault();

        $this.addClass('evil');

    }

});

트리거 이벤트 프로세서
jquery는 $를 통해 사용자 조작을 하지 않아도 됩니다.fn.원소에 연결된 프로세서를 트리거합니다.이 방법이 사용될 때, 연결된 클릭 프로세서의 함수를 간단하게 호출할 수 없습니다.호출할 함수를 변수에 저장해서 귀속할 때 변수의 이름을 전달해야 한다.$가 필요하지 않아도 함수 자체를 마음대로 호출할 수 있다.fn.trigger.
올바른 트리거 이벤트 프로세서

var foo = function(e) {

    if (e) {

        console.log(e);

   } else {

        console.log('this didn\'t come from an event!');

    }

};

$('p').click(foo);

foo(); // instead of $('p').trigger('click')

이벤트 위임을 통한 성능 향상
개발 과정에서 자주 있는 항목에 새로운 요소를 추가합니다. 이럴 때 이벤트를 이 요소에 연결해야 할 수도 있습니다. 이 이벤트는 페이지에 원래 존재하는 요소로 연결됩니다.새로운 요소를 추가할 때마다 이벤트를 귀속시킬 필요가 없고 이벤트 의뢰를 통해 문제를 해결할 수 있습니다.이벤트 의뢰를 통해 이벤트를 용기 요소에 연결한 다음, 이벤트가 발생할 때, 이벤트가 포함된 요소를 찾습니다.만약 당신이 이것이 매우 복잡하게 들린다고 생각한다면, 두려워하지 마세요. jquery가 $를 제공했습니다.fn.live 및 $.fn.delegate 방법으로 그것을 간단하게 합니다.
대부분의 사람들은 이벤트 의뢰를 통해 페이지에 요소를 추가하는 것을 해결하면 페이지에 요소를 추가하지 않아도 프로그램의 성능을 향상시킬 수 있다는 것을 발견했다.수백 개의 이벤트 프로세서를 개별 요소에 연결하여 가벼운 작은 케이스로 만들기;만약 당신이 대량의 원소를 가지고 있다면, 용기 원소에 관련 사건을 의뢰하는 것을 고려해야 한다.
주석:
$.fn.live 방법은 jquery 1.3의 버전이 도입되었는데, 그때는 몇 개의 특정한 이벤트 형식만 지원되었다.도착했어 jquery 1.4.2시, 달러.fn.delegate 방법은 사용할 수 있을 뿐만 아니라, 그것도 더욱 좋은 방법이다.
$.fn.delegate 이벤트 위임

$('#myUnorderedList').delegate('li', 'click', function(e) {

    var $myListItem = $(this);

    // ...

});

$.fn.이벤트 의뢰

$('#myUnorderedList li').live('click', function(e) {

    var $myListItem = $(this);

    // ...

});

귀속의뢰 해제 이벤트
만약 당신이 의뢰된 사건을 제거할 필요가 있다면, 당신은 쉽게 그것들을 해제할 수 있습니다.상응하는 값으로 $.fn.undelegate에서 $를 해제합니다.fn.delegate에 귀속된 이벤트 의뢰, $.fn.die에서 $를 해제합니다.fn.라이브 귀속 이벤트 의뢰.귀속할 때, 당신은 귀속된 함수의 이름을 마음대로 전달할 수 있습니다.
바인딩 이벤트 위임 해제

$('#myUnorderedList').undelegate('li', 'click');

$('#myUnorderedList li').die('click');

이벤트 도움말 도구
jquery는 키보드를 두드리는 소리를 많이 절약할 수 있는 두 가지 이벤트와 관련된 도움말 함수를 제공합니다.
$.fn.hover
   $.fn.hover 방법은 어떤 요소가 마우스가 들어오거나 이벤트를 떠날 때 한두 개의 함수를 실행할 수 있도록 합니다.만약 당신이 함수를 전달해서 집행한다면, 이 함수는 두 이벤트에 동시에 귀속될 것이다.만약 두 개의 함수를 전달한다면, 첫 번째는 마우스가 이벤트에 들어오고, 두 번째는 마우스 제거 이벤트에 귀속됩니다.
주석:
jquery1.4 버전 이전, $.fn.hover 방법은 두 개의 함수가 필요하다.
hover 도움말 함수

$('#menu li').hover(function() {

    $(this).toggleClass('hover');

});

$.fn.toggle
   $.fn.toggle 방법은 클릭 이벤트를 통해 터치하고 두 개 이상의 함수를 수신합니다.클릭 이벤트가 발생할 때마다 연결된 이벤트 대기열이 순서대로 실행됩니다.일반적으로, $.fn.toggle은 두 함수를 수신한다.그러나 시간이 있으면 무한개 함수를 수신하는 현상이 발생한다.그래서 특히 과도한 함수 대기열은 디버깅할 때도 어려운 문제다.
toggle 도움말 함수

$('p.expander').toggle(

    function() {

        $(this).prev().addClass('open');

    },

    function() {

        $(this).prev().removeClass('open');

    }

);

연습하다
입력 알림 만들기
(다음 글의 주소는 글의 첫머리에 따라 원시 글의 주소를 주는 것이다http://jqfundamentals.com/)
찾아보기에서/exercises/index를 엽니다.html 파일./exercises/js/inputHint를 사용합니다.js나 Firebug.검색 입력 (input) 탭의 텍스트로 검색 입력 (input) 을 위한 'hint' 텍스트를 만드는 작업이 있습니다.단계는 다음과 같습니다.
  1.검색 입력 (input) 의 값을 label 요소의 텍스트에 추가합니다.
  2.검색 입력 (input) 에 'hint' 라는class 추가
  3.label 요소 제거
  4.검색 input에 포커스 이벤트를 연결해서 hint의 텍스트와class를 제거합니다
  5.검색 input에 blur 이벤트를 연결하여 hint 텍스트를 저장하고, 텍스트가 없으면 int의class를 저장합니다
만약 당신이 진정한 사이트를 위해 이 기능을 실현하고 있다면, 또 무엇을 고려해야 할지 생각해 보세요.
태그 탐색 추가
브라우저에서/exercises/index를 엽니다.html./exercises/js/tabs를 사용합니다.js.두 개의div 모듈 요소를 위한 탭 내비게이션을 만드는 것이 임무입니다.구현:
  1.모든 모듈 숨기기
  2.첫 번째 모듈 앞에 무질서한 목록 요소를 만듭니다.
  3.$을(를) 사용합니다.fn.each 스트리밍 모듈.모든 모듈에 h2 요소 탭의 텍스트를 무질서 목록에 추가하는 텍스트로 사용합니다
  4.목록 항목에 클릭 이벤트를 바인딩하려면 다음과 같이 하십시오.
1) 관련 모듈 보여주기, 다른 모듈 숨기기
2) 클릭한 목록 항목에 "current"클래스 추가
3) 추가 목록 항목의 "current"클래스 제거
   5.마지막으로 첫 번째 탭 보이기