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

 

 

 

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

혹은, 순차적으로 이벤트가 발생해야 될 때가 있습니다.

이럴 때마다 이미 작성해 두었던 이벤트를 다시 코딩해서 적는 건 너무 비효율 적입니다.

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

 

 

반응형

 

---

 

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 속성 또한 변경되어 로고 이미지가 보이게 됩니다.

 

 

트리거 이벤트 발생

 

 

 

위의 이미지를 보면 트리거 이벤트가 발생하였다는 것을 확인할 수 있습니다.

 

 

 

728x90

 

 

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

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

. trigger( eventType [, extraParameters ] )

 

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

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

 

---

 

결론

 

 

이번 포스팅에서는 클릭하지 않고도 이벤트를 발생시키는 트리거 이벤트에 대해서 알아보았습니다.

트리거 이벤트를 잘 활용한다면 코드의 길이도 줄일 수 있고, 좀 더 쉽게 이벤트들을 다룰 수 있게 될 것입니다.

간단하게 예제를 통해 트리거의 작동법을 숙지하시고,

트리거 이벤트를 사용하여 좀 더 쉽게 다른 이벤트들을 가져와 사용해 보시길 바랍니다.