[jQuery] 클릭하지 않고 클릭 이벤트 발생 시키는 방법

서문

웹페이지를 작성하다 보면, 하나의 버튼을 클릭했을 때 다른 버튼도 함께 동작하면 좋겠다 싶은 때가 있습니다.

그때 사용하면 좋은 메서드인 trigger에 대해서 알아보도록 하겠습니다.

 

 

반응형

 

---

 

본문

. trigger 이벤트는 click와 같은 javaScript 이벤트 유형을 포함하는 문자열입니다.

트리거 이벤트는 트리거 이벤트 작동을 선언하기 전에 앞에서 이벤트 핸들러가 정의되어 있어야 합니다.

코드는 순차적으로 실행되니 트리거 이벤트 위에 꼭 클릭이벤트 처리를 하나 만들어 주셔야 합니다.

 

예를 들어 보겠습니다.

이미지를 보여주는 버튼 하나와 경고창을 생성하는 버튼 하나를 만들어주고, 경고창 버튼을 눌렀을 때, 이미지를 보여주는 버튼의 이벤트 효과도 함께 동작하게 해 보겠습니다.

 

<input type="button" class="naver_img" value="네이버 이미지 띄우기">
<img src="" id="naver">
<input type="button" class="alert" value="경고창 띄우기">

 

간단하게 버튼 두 개와 이미지를 띄울 img 태그를 하나 생성했습니다.

 

버튼 두개

 

이런 식으로 버튼이 생성됩니다.

이제 jQuery에서 버튼클릭 시 동작하는 이벤트를 작성해 보겠습니다.

 

$(document).ready(function() {
  $(".naver_img").click(function(){
    $("#naver").attr("src", ".jpg")
  });
  
  $(".alert").on("click", function(){
     alert("현재 네이버 로고 출력중!");
     $(".naver_img").trigger("click");
  });
});

 

이미지 소스는 구글에서 검색해서 나온 네이버 로고 이미지 아무거나 경로를 들고 왔습니다.

 

네이버 이미지 띄우기라는 버튼을 클릭 시 네이버 로고가 img태그에서 생성되어 보이게 되고, 경고창 띄우기 버튼을 클릭 시에는 경고창을 띄우고 이후 트리거가 발동되어 네이버 이미지 띄우기 버튼의 클릭이벤트도 함께 동작하게 됩니다.

 

$(". naver_img"). trigger("click");

 

그러면 경고창이 띄워지고 이후 네이버 로고 이미지가 생성되게 됩니다.

 

경고창 출력

 

이렇게 경고창이 출력되고 확인버튼을 누르면, 트리거를 통해 img태그의 src 속성 또한 변경되어 네이버 로고 이미지가 보이게 됩니다.

트리거 이벤트 발생

 

 

아래에서 직접 버튼을 눌러 동작하는 것 확인해 보시기 바랍니다.

 

 

See the Pen trigger() by dnj01228 (@dnj01228) on CodePen.

 

 

 

 

728x90

 

 

생각보다 간단하고 쉽게 동작하는 것을 확인할 수 있습니다.

트리거는 클릭이벤트뿐만 아니라 작동하는 대부분의 이벤트들을 넣어서 사용이 가능합니다.

. trigger( eventType [, extraParameters ] )

 

괄호 안에 eventType 부분에 자신이 지정한 이벤트를 넣어서 사용하시면 됩니다.

현재 제가 설명한 것은 클릭이벤트이기 때문에 괄호 안에 click를 넣어서 사용했습니다.