[jQuery] click(), trigger('click') 차이 알아보기

js소스를 보다가 또 헷갈리는 부분을 찾았다.

바로 클릭 이벤트..!

 

$("#btn").on("click", function() {
	// click event
});

$("#btn").click();
$("#btn").trigger("click");

 

id가 btn인 요소에 click 이벤트를 바인딩한 예제이다.

click()과 trigger('click') 둘 다 바인딩된 click 이벤트를 수행한다.

 

도대체 다른 게 뭘까?

 

click : Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

trigger : Execute all handlers and behaviors attached to the matched elements for the given event type.

 

공식 홈페이지의 설명을 참고해봤다!

 

click()은 click이벤트를 바인딩하거나 요소의 click 이벤트를 트리거할 수 있다고 한다.

trigger()는 이벤트 타입에 일치하는 요소의 모든 이벤트 동작들을 실행한다고 한다.

 

$("#btn").click(function(){
	// click event
});

 

이런 식으로 btn 요소에 click 이벤트를 바인딩할 수도 있다.

하지만 바인딩만 되고 클릭 이벤트는 실행되지 않는다.

 

왜일까?

 

jquery-3.6.0.js

click()의 내부 코드를 찾아봤다. (비슷하게 사용 가능한 다양한 이벤트가 있다.)

arguments가 없으면 trigger로 해당 이벤트를 실행하고

arguments가 있으면 on함수를 통해 이벤트를 바인딩한다.

 

내부 코드를 보니 한 번에 이해가 됐다.

.click()은 trigger를 통해 이벤트를 실행하고

.click(function~)은 on을 통해 이벤트를 등록한다. 

 

결론은

등록된 클릭 이벤트를 스크립트에서 실행하려면 trigger()를 사용하는 게 맞고

직관적으로 클릭 이벤트를 등록하려면 click(arg), 실행하려면 click()을 사용하는 방법이 있겠다.

 

헷갈리는 내용을 정리해보니 어떻게 사용해야 할지 명확해졌다.

앞으로도 애매한 것들과 헷갈리는 것들을 잘 찾아봐야겠다!