본문 바로가기
프로그래밍/jQuery

triggerHandler(), 하나의 함수만 실행시키기

by zoo10 2012. 3. 20.

triggerHandler

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

.triggerHandler( eventType [, extraParameters] )Returns : jQuery

개요 : 이벤트 요소에 연결된 모든 처리기(handler)를 실행합니다.

  • .triggerHandler( eventType [, extraParameters] )
  • eventType JavaScript 이벤트 타입을 표현하는 문자열, click 또는 submit 같은.
  • extraParameters 이벤트 핸들러에 전달할 추가 파라미터.

.triggerHandler() 함수는 .trigger() 함수와 유사한 동작을 합니다. 단 아래의 예외 사항이 있습니다.

  • .triggerHandler() 함수는 이벤트의 기본 동작을 발생시키지는는 않습니다. (form 전송과 같은).
  • .trigger() 함수는 jQuery 객체와 매치되는 모든 요소들에서 동작하는 반면, .triggerHandler() 함수는 오직 일치하는 요소 증 첫번째 요소에서만 동작을 합니다.
  • .triggerHandler() 로 만들어진 이벤트는 DOM 구조를 따라 버블링 되지 않습니다. 만약 타겟이 되는 요소를 직접 핸들링하지 않으면, 그 요소에서는 아무런 일도 일어나지 않습니다.
  • jQuery 객체를 반환하는 대신에, .triggerHandler() 는 마지막 핸들러가 발생하여 생긴 반환값(value)가 있던 없던 값(value)을 반환합니다. 만일 핸들러가 실행되지 않았다면, undefined을 반환합니다.

더 많은 정보를 원하시면 .trigger() 함수를 참조하십시오.

예 제  
.triggerHandler() 함수와 .trigger() 함수의 차이점을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>
<script>

$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

</script>

</body>
</html>

미리보기

눈치 채셨습니까? 두 함수는 비슷하게 생겼지만 아주 다른 동작을 보여주네요. trigger() 함수는 input에 포커스가 들어가면서 텍스트가 나타납니다. 하지만 triggerHandler() 함수는 input에 포커스가 들어가지는 않고 텍스트만 나타나게 됩니다.

둘다 input에 focus() 이벤트를 호출하여 실행시키고 있지만 triggerHandler() 함수로 호출된 focus() 함수는 실행되지 않았네요. 두 함수의 차이점을 잘 인식하고 계셔야 겠네요.

 

음, 두개를 구분해서 사용할 일이 있을지 모르겠지만 알아둬야 겠네요.

그럼 즐프하세요.

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