jQuery API 정복 - 포커스 잃을 때 이벤트, blur()

.blur()

원문 링크 http://api.jquery.com/blur/

함수들

.blur( handler(eventObject) )Returns : jQuery

개요 : JavaScript 이벤트인 "blur"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

• .blur( handler(eventObject) )
• handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
• .blur( [eventData], handler(eventObject) )
• eventData 이벤트 핸들러에 전달될 데이터 집합.
• handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
• .blur( )

이 함수는 .bind('blur', handler)을 줄여 놓은 것입니다. 그리고 .trigger('blur') 로 blur이벤트를 발생시키기도 합니다.

blur 이벤트는 요소(element)에서 포커스를 없어질 때 발생합니다. 원래, 이 이벤트는 <input>와 같은 폼 요소 전용이었습니다. 브라우져가 발전하면서 모든 타입이 요소에서 사용할 수 있도록 확장되었습니다. Tab키 같은 키보드에 의해서 포커스를 잃을 수도 있고, 페이지 상의 다른 부분을 마우스로 클릭되면서 포커스를 잃기도 합니다.

다음 예를 보시죠.

<form>
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div id="other">
  Trigger the handler
</div>
The event handler can be bound to the first input field:
$('#target').blur(function() {
  alert('Handler for .blur() called.');
});

첫번째 필드에 포커스를 위치시켰다가, 다른 곳을 클릭하거나 키보드의 탭키를 이용해서 포커스를 이동시켜 보시면 :

Handler for .blur() called. 이라는 알림창이 나오게 됩니다.

인자없이 .blur() 함수를 프로그램적으로 실행시켜 보시죠.

$('#other').click(function() {
  $('#target').blur();
});

위의 코드를 적용시킨후에, div인 Trigger the handler 부분을 클릭해도 알림창이 나오게 됩니다.

예 제
모든 p 태그에 blur이벤트를 발생시켜 볼까요:

$("p").blur();

 

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.