커스텀 이벤트를 만들려고 합니다. 이벤트를 실행하기 위해서는 이벤트 핸들러가 필요하죠. 클릭이나 스크롤 이동, 브라우저 사이즈 등등 몇몇의 핸들러가 작동하게 될 경우 브라우저에 이를 알리고 함수를 실행하지만 이런 이벤트 핸들러 없이도 동작이 가능하게 하려면 trigger()메소드가 필요합니다.

$('selector').trigger('선택할 이벤트');

위와 같이 원하는 요소에 trigger() 메소드를 적용하고 선택할 이벤트를 인자로 넣어주면 됩니다. 그럼 아래 예제를 보세요.



# trigger() 예제 알아보기 아래는 trigger() 메소드를 사용하는 간단한  예제입니다. 먼저 css입니다.
.testEle {
  width:100px;
  height:100px;
  background: #f80;
  text-align:center;
  color:#fff;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

#testEle2.testEle {
  height:24px;
  background:#333;
}

다음은 html입니다.
<div class="testEle" id="testEle">
  Click Num: <span id="testspan">0</span>
</div>
<div class="testEle" id="testEle2">Switch!</div>

스크립트 코드입니다.
$('#testEle').on('click', function() {
  ++sumtest;
  $('#testspan').text(sumtest);
});
$('#testEle2').on('click', function() {
  $('#testspan').trigger('click');
});

위 코드를 실행하면 아래와 같이 나타나게됩니다.



Click Num: 0

Switch!



# 제이쿼리 trigger() 예제 설명 위 예제를 보면 첫번째 요소는 클릭이 가능하며 클릭시 숫자가 올라갑니다. 그리고 아래의 스위치 요소는 클릭 이벤트가 동작할 경우 자기 자신이 아닌 위에 있는 요소에 클릭 이벤트가 발생하도록 도와줍니다.