trigger() 메서드는 특정 이벤트를 강제로 발생시키는 데 사용됩니다. DOM 요소에서 이벤트 핸들러를 호출하거나 사용자 지정 이벤트를 트리거할 때 유용합니다.
사용법
$(선택자).trigger(이벤트_이름);
$(선택자): 이벤트를 발생시킬 대상 요소를 선택합니다.
이벤트_이름: 발생시키려는 이벤트의 이름을 나타냅니다. 이벤트 이름은 문자열로 제공됩니다.
$("#myButton").click(function() {
$("#anotherElement").trigger("click");
});
위 예제에서 #myButton은 클릭 이벤트를 처리하며, 해당 버튼을 클릭할 때 #anotherElement에 대한 클릭 이벤트가 발생합니다.
소스코드 및 설명
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">버튼 클릭</button>
<p id="message">버튼을 클릭해보세요.</p>
<hr>
<input type="text" id="myInput">
<p id="message1"></p>
<hr>
<button id="myButton2">버튼 클릭</button>
<p id="message2"></p>
<script>
$(document).ready(function() {
/* 강제 클릭 이벤트 발생 */
$("#myButton").click(function() {
$("#message").text("버튼이 클릭되었습니다.");
});
// 버튼 클릭 이벤트를 강제로 발생
$("#myButton").trigger("click");
/* 강제 클릭 이벤트 발생 */
/* 입력 필드 값 변경 이벤트 트리거 */
$("#myInput").on("valueChanged", function() {
$("#message1").text("입력값이 변경되었습니다.");
});
// 입력 필드의 값이 변경될 때 "valueChanged" 이벤트 트리거
$("#myInput").on("input", function() {
$(this).trigger("valueChanged");
});
/* 입력 필드 값 변경 이벤트 트리거 */
/* 강제 클릭 이벤트 발생 후 데이터 전달 */
$("#myButton2").click(function(event, data) {
$("#message2").text("이벤트 데이터: " + data.myData);
});
// 버튼 클릭 이벤트를 강제로 발생하고 데이터 전달
$("#myButton2").trigger("click", { myData: "사용자 지정 데이터" });
/* 강제 클릭 이벤트 발생 후 데이터 전달 */
});
</script>
</body>
</html>
1. 강제 클릭 이벤트 발생
$("#myButton").trigger("click"); 를 통해서 myButton 버튼을 강제로 클릭 이벤트를 발생시키고 myButton 클릭 이벤트 핸들러가 실행되면서 message 엘리먼트의 텍스트를 버튼이 클릭되었습니다.로 업데이트합니다.
2. 입력 필드 값 변경 이벤트 트리거
$("#myInput").on("valueChanged", function() { ... }): myInput 입력 필드에서 valueChanged라는 사용자 정의 이벤트를 정의하고, 이벤트가 발생하면 message1 엘리먼트의 텍스트를 업데이트합니다.
$("#myInput").on("input", function() { ... }): myInput 입력 필드에서 발생하는 input 이벤트를 사용하여, 입력 필드의 값이 변경될 때 valueChanged 이벤트를 강제로 발생시킵니다.
3. 강제 클릭 이벤트 발생 후 데이터 전달
$("#myButton2").click(function(event, data) { ... }): myButton2 버튼 클릭 이벤트 핸들러를 정의하고, 이벤트 핸들러는 데이터 객체 data를 받아와 message2 엘리먼트의 텍스트를 데이터와 함께 업데이트합니다.
$("#myButton2").trigger("click", { myData: "사용자 지정 데이터" });: myButton2 버튼을 클릭 이벤트를 강제로 발생시키면서 사용자 지정 데이터를 이벤트 핸들러에 전달합니다.
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] jQuery.extend() 함수 사용법, 예제 (객체 합치기) (0) | 2023.11.03 |
|---|---|
| [jQuery] Air Datepicker 사용방법, 예제 (날짜 선택) (0) | 2023.10.31 |
| [jQuery] append(), prepend() 메서드 사용법, 예제 (HTML 구조변경) (0) | 2023.10.27 |
| [jQuery] each() 메서드 사용법, 예제, 활용방법 (반복 작업) (1) | 2023.10.26 |
| [jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기 (0) | 2023.10.12 |
댓글