jQuery change 이벤트 배우기 (select, input 요소)

 

 

안녕하세요.

오늘은 jQuery의 change 이벤트에 대해서 알아보려고 합니다. change 이벤트는 이름에서도 알 수 있듯이 선택한 요소의 변경이 발생했을 때의 이벤트를 핸들링하는 기능입니다. click과 같은 이벤트처럼 사용 빈도가 높은 이벤트이며, 보통은 select box, input text, input checkbox, input radio 등 선택 요소를 변경할 때 많이 사용합니다.

 

그럼 예제 소스 코드를 통해서 하나씩 정리해 보도록 하겠습니다.

 

---

import jQuery v3.6.1

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

예제 소스 코드를 설명하기 전에 먼저 jQuery 라이브러리를 import 시켜줍니다. 저는 cdn 방식으로 연동을 하였고, jQuery 버전은 3.6.1입니다. 사용하는 환경의 라이브러리 버전을 꼭 확인하고 예제를 보는 것이 좋습니다!

---

1. input text change 이벤트

<script>
$(function () {
    // input text 요소 change 이벤트
    $('#textId').change(function() {
        $('#outId').val($(this).val());
    });
});
</script>
<div>
    값 입력
    <input type="text" id="textId"/>
    <br>
    변경 값
    <input type="text" id="outId"/>
</div>

가장 먼저 input text 요소의 예제를 보도록 하겠습니다. 

위의 예제 소스 코드를 보게 되면 html 영역에 input text 요소를 추가해 줬습니다.

그 다음은 자바스크립트 영역에서 input text 요소에 change 이벤트를 연동해 줬습니다. 이벤트 핸들링을 하게 되면 이벤트 내부에서 이벤트 발생시 변경한 값을 하위의 input text 요소로 값을 입력해주도록 하였습니다.

 

그럼 위의 예제 소스 코드의 실행 결과를 보도록 하겠습니다.

---

실행 결과

실행 결과는 위와 같이 입력하는 값이 하위의 input text로 값을 잘 넣어주고 있는 결과 모습입니다.

그런데 input text는 change 이벤트가 발생하려면 값을 입력하고난 후 focus가 빠져 나가거나 enter키를 입력해 줘야 합니다. 그냥 입력만 하고서는 change가 발생하지 않습니다.

 

그럼 다음은 select box를 통한 예제를 보도록 하겠습니다.

 

반응형

---

2. select box change 이벤트

<script>
    $(function () {
        
        $('#selectId').change(function() {
            $('#outId').text($(this).val());
        });
    });
</script>
<div>
    선택 값:
    <select id="selectId">
        <option value="선택 1">선택 1</option>
        <option value="선택 2">선택 2</option>
        <option value="선택 3">선택 3</option>
        <option value="선택 4">선택 4</option>
        <option value="선택 5">선택 5</option>
    </select>
    <br>
    변경 값:
    <span id="outId"></span>
</div>

select box 요소에 change 이벤트를 추가해 준 예제 소스 코드입니다. 

소스 코드를 보게 되면 select box의 값을 변경할 경우 change 이벤트가 실행되고, 이벤트 내부에서는 선택한 option의 value 값을 하위의 span 요소로 넣어주게 되는 예제입니다.

 

그럼 실행 결과를 보도록 하겠습니다.

---

실행 결과

위의 실행 결과를 보게 되면 select box를 변경할 때 하위의 span 요소로 값을 넣고 있는 결과 모습입니다.

 

그럼 다음은 checkbox의 change 이벤트 예제를 확인해 보도록 하겠습니다.

---

3. input checkbox change 이벤트

<script>
    $(function () {
        
        $('.textClass').change(function() {
            
            let checkedArr = [];
            $('.textClass:checked').map((a, b) => {
                checkedArr.push($(b).val());
            })
            $('#outId').text(checkedArr.join(', '));
        });
    });
</script>
<div>
    선택 값:
    <input type="checkbox" name="check" class="textClass" value="선택 1"/>선택 1
    &nbsp;
    <input type="checkbox" name="check" class="textClass" value="선택 2"/>선택 2
    &nbsp;
    <input type="checkbox" name="check" class="textClass" value="선택 3"/>선택 3
    <br>
    변경 값:
    <span id="outId"></span>
</div>

마지막으로 checkbox의 change 이벤트 예제 소스 코드입니다.

input text와 select box의 change 이벤트 예제와는 조금 다른 방식입니다.

checkbox는 다중 선택이기 때문에 선택한 요소의 목록을 기준으로 value값을 추출하여 변경값 span 요소에 추가해 주도록 하였습니다.

---

let checkedArr = [];
$('.textClass:checked').map((a, b) => {
    checkedArr.push($(b).val());
})
$('#outId').text(checkedArr.join(', '));

change 이벤트의 내부를 보게 되면 checkbox의 class는 동일하게 'textClass'값이므로 $('.textClass:checked')를 호출하게 되면 동일한 class로 된 checkbox 요소들 중 체크가 된 요소만 리스트에 담아 반환을 해주게 됩니다. 

반환한 요소의 리스트는 value값이 아닌 요소이기 때문에 map loop를 돌며 value값을 추출해 주고, 그 후에 span 요소에 value값을 추가해 주도록 하였습니다.

실행 결과를 보도록 하겠습니다.

---

실행 결과

위의 실행 결과처럼 선택한 checkbox 요소들은 전부 하위의 변경 값에 표시가 되는 결과 모습입니다.

 

---

마무리

오늘은 jQuery의 change 이벤트에 대해서 정리해 봤습니다. 일반적인 요소들을 선택할 경우는 click을 많이 사용하지만 오늘 예제에서 사용했던 select box, input checkbox, input radio 등과 같은 요소들을 선택할 때에는 click보다는 change 이벤트로 주는 것이 더 효율적입니다. click과 change 이벤트의 차이만 확실히 안다면 어느 환경에서 어떤 요소에 이벤트를 줄 것인지 활용하는데에 크게 무리가 없을 것입니다.

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---