• 회원가입
  • 로그인

[Event] JQ - trigger() 메서드 ★ - 지정 이벤트 수동 촉발과 이벤트 기본동작 수행. (= 트리거 메서드) ※ isTrigger 속성.

목차
  1. trigger() 예제 - select 이벤트 촉발시키기
  2. trigger() 정의
  3. trigger() 구문
  4. trigger() 예제 - 사용자 정의 이벤트에 매개변수 전달하기
  5. trigger() 예제 - cf. triggerHandler() 메서드
  6. isTrigger 속성 - trigger()인지, triggerHandler()인지 체크

 

trigger() 예제 - select 이벤트 촉발시키기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("input").select(function(){

    $("input").after(" Homzzang.com");

  });

  $("button").click(function(){

    $("input").trigger("select");

  });

});

</script>


<input type="text" value="홈짱닷컴"><br><br>

<button>클릭</button>

 

결과보기

PS. 주의: 1회 클릭 시 기본 동작 여러 번 실행될 수도 있음.

 

trigger() 정의

 

선택 요소에 대해 지정 이벤트 수동 촉발 및 이벤트 기본 동작 수행.

 


cf. trigger() vs. triggerHandler() 메서드 차이점.

 

trigger() 메서드

① 이벤트 촉발 O. :  trigger() 메서드와 동일한 점.

② 이벤트 기본 동작 수행 O.

③ DOM 구조 따라 이벤트 확산 O.

 

triggerHandler() 메서드

① 이벤트 촉발 O. :  trigger() 메서드와 동일한 점.

② 이벤트 기본 동작 수행 X.

③ DOM 구조 따라 이벤트 확산 X

 

PS. 공식 매뉴얼 좌표.

https://api.jquery.com/trigger/

https://api.jquery.com/triggerHandler/

 

 

trigger() 구문

 

$(selector).trigger(event,[param1,param2,...])

 


[매개변수]

 

event

필수. 선택 요소에 대해 촉발시킬 이벤트 지정.

 

[param1,param2,...]

선택. 이벤트 핸들러에 전달할 추가적인 매개변수.

※ 커스텀 (= 사용자 정의) 이벤트 제어에 유용함.

[주의] 반드시 전달할 매개변수를 대괄호로 묶어야 함.

(∵ 대괄호로 안 묶으면, 맨 처음 매개변수만 전달됨.)

 

 

trigger() 예제 - 사용자 정의 이벤트에 매개변수 전달하기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").click(function(){

    $("p").on("hz", function(event, site, host, open){

      alert(site + "\n" + host + "\n" + open);

    });

    $("p").trigger("hz", ['홈짱닷컴', 'Homzzang.com', '2012']);

  });

});

</script>


<p>클릭</p>

 

결과보기

 

trigger() 예제 - cf. triggerHandler() 메서드

[예제1]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("input").select(function(){

    $("input").after(" Homzzang.com");

  });

  $("#btn1").click(function(){

    $("input").trigger("select");

  });

  $("#btn2").click(function(){

    $("input").triggerHandler("select");

  });

});

</script>


<p><input type="text" value="홈짱닷컴"></p>


<button id="btn1">trigger()</button>

<button id="btn2">triggerHandler()</button>

 

결과보기 


[예제2]

 

※ trigger() : 가장 마지막 input 배경색이 바뀜.

※ trggerHandler() : 클릭한 button 배경색이 바뀜. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button:eq(0)").click(function(){

    $("input[type]").trigger("focus");

  })

  $("button:eq(1)").click(function(){

    $("input[type]").triggerHandler("focus");

  })

})

</script>


<style>

:focus {background:yellow}

</style>

 

<button>trigger</button>

<button>triggerHandler</button>

<br><br>

<input type="text">

<input type="text">

<input type="text">


결과보기 


[예제3]

 

※ trigger() : P, DIV 각각 첫 번째 배경색이 바뀜.

※ trggerHandler() : P 첫 번째만 배경색이 바뀜.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('p,div').select(function(){

    $(this).css('background','yellow');

  })

  $("button:eq(0)").click(function(){

    $('p,div').css('background','transparent');

    $("[class*=1]").trigger("select");

    

  })

  $("button:eq(1)").click(function(){

    $('p,div').css('background','transparent');

    $("[class*=1]").triggerHandler("select");    

  })

})

</script>


<button>trigger</button>

<button>triggerHandler</button>

<br><br>

<p class='p1'>첫번째 P</p>

<p class='p2'>두번째 P</p>

<p class='p3'>세번째 P</p>

<p class='p4'>네번째 P</p>

<div class='p1'>첫번째 DIV</div>

<div class='p2'>두번째 DIV</div>

<div class='p3'>세번째 DIV</div>

<div class='p4'>네번째 DIV</div>


결과보기 

 

isTrigger 속성 - trigger()인지, triggerHandler()인지 체크

 

trigger() 인지, tirggerHandler() 인지 체크.

 


 

※ isTrigger 값이 2이면, tirggerHandler()

※ isTrigger 값이 3이면, trigger

 


[예제]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('p,div').select(function(e){

    $('p,div').css('background', '');

    $("button:eq(2)").triggerHandler('click');

    console.log(e.isTrigger);

    // triggerHandler

    if (e.isTrigger == 2) {

        $('p,div').filter('[class*=1]').css('background','yellow');

    }

    // trigger

    if (e.isTrigger == 3) {

        $('p,div').eq(0).css('background','yellow');

    }

  })

  $("button:eq(0)").click(function(){

    $("[class*=1]").trigger("select");    

  })

  $("button:eq(1)").click(function(){

    $("[class*=1]").triggerHandler("select");    

  })

  $("button:eq(2)").click(function(){

    $("*").css("background", '');    

  })    

})

</script>


<button>trigger</button>

<button>triggerHandler</button>

<button>reset</button>

<br><br>

<p class='p1'>첫번째 P</p>

<p class='p2'>두번째 P</p>

<p class='p3'>세번째 P</p>

<p class='p4'>네번째 P</p>

<div class='p1'>첫번째 DIV</div>

<div class='p2'>두번째 DIV</div>

<div class='p3'>세번째 DIV</div>

<div class='p4'>네번째 DIV</div>

<div class='p1'>첫번째 DIV</div>

 

결과보기

Big1 님 (210326) https://sir.kr/qa/405744


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012