웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

제이쿼리 포커스 아웃 이벤트 알아보기, focusout()

Last Modified : 2018-02-01 / Created : 2018-01-31
61,517
View Count

제이쿼리를 사용하여 특정 엘리먼트에서 포커스 아웃이 되었을때 이벤트를 발생시키는 방법을 알아봅니다.

focusout(function() { // code })




# Focusout 이벤트란

먼저 포커스아웃에 대하여 알아봅니다. 이 이벤트는 특정 엘리먼트가 선택된 경우에 해당 엘리먼트를 벋어나는 경우 focus out이 발생하여 이벤트를 동작시키도록 합니다.


! 웹사이트에서 언제 사용되는가?

만약 웹사이트를 구축하는 경우라면 아래의 경우에 포커스 아웃 이벤트가 많이 사용됩니다.
- 검색을 위한 input 태그 포커스 아웃되면 사라지도록 만들기

그렇다면 자세한 예제를 아래에서 알아보시기 바랍니다.



# 제이쿼리 focusout() 예제보기

그렇다면 검색 기능을 아래에 만들어보겠습니다. 만약 검색 버튼을 누르면 입력할 수 있는 input 태그가 나타나며 input태그에서 벋어나는 경우... 즉 포커스아웃되면 input 태그가 사라지게 됩니다.
<div class="search-view">
  <button id="btn">검색</button>
  <input id="ele" type="text" class="hidden" />
</div>


아래는 자바스크립트 코드입니다.
$('#btn').click(function() {
  $('#ele').removeClass('hidden');
});
$('#ele').focusout(function() {
  $(this).addClass('hidden');
});

이제 위 코드를 실행시키면 어떻게 될까요? 아래에서 직접 버튼을 클릭 후 input태그를 포커스아웃 해보시기 바랍니다.


! 실제 코드 동작해보기

먼저 버튼을 클릭합니다. 그 후 input 외부의 다른 요소를 선택합니다.

Previous

jQuery 페이지 최상단 top으로 이동하는 버튼 만들기, 스크롤 이동

Previous

제이쿼리 when() 메소드 알아보기