trigger 메서드

trigger 메서드는 요소에 지정된 유형의 이벤트에 대해 연결된 모든 이벤트 핸들러를 실행할 수 있게 합니다. 이 메서드는 사용자가 실행했을 때와 동일한 순서로 핸들러 함수를 호출합니다. 이벤트 핸들러를 호출하지만 기본 이벤트를 실행하지 않으려면 triggerHandler 메서드를 사용하세요.

구문

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

$(selector).trigger(eventType, [extraParameters]);

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

$(selector).trigger(event, [extraParameters]);

trigger 메서드에 추가 매개변수를 전달하는 것과 on 메서드에 데이터를 전달하는 것 사이에는 차이가 있습니다. 첫 번째 경우 데이터는 이벤트가 실행되는 시점에 정의되어야 하는 반면, 두 번째 경우에는 핸들러 함수를 바인딩하는 시점에 이미 정의되어 있어야 합니다.

예제

#first 버튼을 클릭하면 값이 첫 번째 span 요소에서만 증가하고, #second 버튼을 클릭하면 두 곳 모두에서 증가하며, 첫 번째 버튼에서 사용자 클릭을 시뮬레이션합니다. increase 함수는 매개변수로 전달된 숫자를 1씩 증가시킵니다. trigger 메서드를 사용하여 #second 버튼을 누를 때 첫 번째 span 요소의 클릭 이벤트도 실행되도록 합니다:

<button id="first">button1</button>
<button id="second">button2</button>
<div><span>0</span></div>
<div><span>0</span></div>

button {
	margin: 10px;
}

div {
	margin-left: 10px;
	font-weight: bold;
}

span {
	color: green;
}

$('#first').click(function() {
	increase($('span').first());
});

$('#second').click(function() {
	$('#first').trigger('click');
	increase($('span').last());
});

function increase(str) {
	let num = parseInt(str.text(), 10);
	num.text(num + 1);
}

함께 보기

요소에 이벤트 핸들러를 바인딩할 수 있는 on 메서드
요소에 연결된 모든 이벤트 핸들러를 실행할 수 있는 triggerHandler 메서드
이벤트에 대한 정보를 포함하는 event 객체
JavaScript submit 이벤트에 핸들러를 바인딩하거나 해당 이벤트를 발생시킬 수 있는 submit 메서드