[Jquery] html 태그 중 selectBox event 필터링 하기

신규 개발 화면의 경우 Vue.js를 이용해 개발하기 떄문에 Jquery를 쓸일이 없지만, 기존에 개발되어 있는 화면의 경우 Jquery로 작성되어 있기때문에 작은규모의 수정사항이 생기면 Jquery로 수정을 하고있다.

 

개발을 하던 중 input태그 중에서 타입이 selectBox인 경우 액션을 취하고 싶은데, 이벤트가 발생했을 때 이벤트를 컨트롤하는 방법을 정리한 글이 없는 것 같아서 정리한다.

 

Q. 여러개의 div안에 selectBox와 inputBox가 있고, 그 중에서 selectBox가 change이벤트가 발생했을 때 action을 취하고 싶다. html코드는 대충 다음과 같다고 했을 때

    <%-- 생략 --%>
    
    <div class="head">
        <div class="test-arae">
            <select class="input-box">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <input class="input-box">
        </div>
        <div class="test-arae">
            <select class="input-box">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <input class="input-box">
        </div>
        <div class="test-arae">
            <select class="input-box">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <input class="input-box">
        </div>
    </div>

이 3개의 div 공간 중 selectBox에서 이벤트가 발생한 경우를 찾고 싶었던 것이다. 여기서 이벤트가 발생한 대상을 찾으려면 다음 코드와 같이 하면되고,

$('.head').on('change', function(event) {
	console.log($(event));
});

저 event라는 parameter을 log로 찍어보면 다음과 같다.

여기서 주목해야할건 저 taget이라는 object다. target안의 값들 중 tagName란게 있다.

tageName을 이용해서 이벤트가 발생한 대상 중 selectBox인 것만 걸러내는 코드를 작성하게 되면 다음과 같이 작성하면 된다.

$('.head').on('change', function(event) { // 통상적으로 사용하는 방식
    if ($(event.target)[0].tagName === 'SELECT') {
       alert('selectBox 이벤트 발생')
    }
});
$('.head').change(e => {if ($(e.target)[0].tagName === 'SELECT') alert('selectBox 이벤트 발생')}); // 람다식을 이용해서 작성

이렇게 해서 selectBox가 change 이벤트를 발생할 떄만 action을 취할 수 있게 되었다.

좀 더 고민하면 이것보다 좋은 코드를 짤 수 있을 것 같은데, 좀 더 고민을 해봐야겠다.