triggerHandler 메서드

triggerHandler 메서드를 사용하면 요소에 연결된 모든 이벤트 핸들러를 실행할 수 있습니다. 이 메서드는 trigger 메서드와 유사하게 작동하지만, 다음과 같은 차이점이 있습니다: 이벤트 핸들러는 실행되지만 표준 이벤트는 발생하지 않습니다. 예를 들어 triggerHandler('submit')을(를) 실행하면, submit 이벤트가 발생하지 않습니다. triggerHandler 메서드는 세트의 첫 번째 요소에만 작동합니다. triggerHandler로 실행된 이벤트는 DOM 요소 계층 구조에서 버블링되지 않습니다. triggerHandler는 jQuery 객체를 반환하지 않으며, 마지막으로 호출된 핸들러에서 얻은 값을 반환합니다. 실행된 핸들러가 없으면 undefined를 반환합니다.

구문

첫 번째 매개변수로는 문자열 형태의 이벤트 유형을 전달할 수 있으며, 두 번째 선택적 매개변수로는 핸들러에 전달할 추가 매개변수를 포함하는 배열이나 객체를 전달할 수 있습니다:

javascript$(selector).triggerHandler(eventType, [additionalParameters]);

첫 번째 매개변수로 jQuery.Event 객체 형태의 이벤트를 전달할 수도 있습니다:

javascript$(selector).trigger(event, [additionalParameters]);

예제

#test1 버튼을 클릭했을 때 인풋 필드에 포커스가 가고 콘솔에 'Focused'가 출력되도록, 즉 핸들러 함수와 포커스 이벤트가 모두 실행되도록 해봅시다. #test2 두 번째 버튼을 클릭하면 핸들러 함수만 실행되고 인풋 필드에는 포커스가 가지 않도록 해봅시다:

html<button id="test1">button1</button>
<button id="test2">button2</button>
<input type="text">

javascript$('#test1').click(function() {
  $('input').trigger('focus');
});

$('#test2').click(function() {
  $('input').triggerHandler('focus');
});

$('input').focus(function() {
  console.log('Focused')
});

함께 보기