목차
- trigger() 예제 - select 이벤트 촉발시키기
- trigger() 정의
- trigger() 구문
- trigger() 예제 - 사용자 정의 이벤트에 매개변수 전달하기
- trigger() 예제 - cf. triggerHandler() 메서드
- 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
