자바스크립트 체인지 이벤트 사용하기 javascript onchange event

웹페이지에서 사용자가 어떤 값을 선택할 때 원하는 동작을 하도록 하면 귀찮은 단계가 없어진다. 사용자가 입력중이거나 조회중인 화면에서 선택지에 따라 다른 데이터를 표시해주면 편하다. 이런 값이 변경되는 상태에 따라 동작을 하는 것이 change 이벤트이다.

자바스크립트 체인지 이벤트 사용하기
javascript onchange event

change 이벤트는 사용자가 어떤 값을 선택했을 때 특정작업을 하도록 유도하거나 원하는 정보를 볼 수 있도록 해 준다.

웹페이지의 태그의 상태변화에 따라 동작을 하는 이벤트이기도 하다.

이 이벤트 또한 어떤 태그에 사용해도 무방하다.

단, 입력란의 경우는 조금 다르다.

선택에 따른 태그에 사용하는 것이 적합하다.

이벤트 발생 조건

웹페이지에서 사용자가 값을 선택하면 동작을 한다.

보통 선택박스나 체크박스 등에 많이 사용된다.

입력란에도 사용된다.

하지만 차이가 있다.

선택에 따라 즉각적인 반응이 필요한 경우 onchange 이벤트를 사용하면 된다.

사용법

onchange 이벤트 또한 onclick 이벤트와 사용법은 같다.

태그에 onchange="메서드명" 으로 적어주면 된다.

보통 체크박스나 선택목록에 많이 사용된다.

샘플코드

간단한 샘플을 만들어 본다.

이것은 웹페이지를 만들 때면 자주 사용하게 될 것이다.

선택목록 중 하나를 선택하면 선택한 값이 나오도록 하였다.

입력란은 단어가 입력되었다면 상태가 변경된 것이기에 onchange 이벤트가 발생할 것이다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 클릭이벤트 onClick</h1>

        <p>
            <input id="txt" type="text" placeholder="글자를 입력하세요." onchange="return fnEvtChgTxt();"/>
        </p>
        <p>
            <select id="slt" onchange="fnEvtChgSlt()">
                <option value="--">--t선택--</option>
                <option value="서울">서울</option>
                <option value="대전">대전</option>
                <option value="대구">대구</option>
                <option value="부산">부산</option>
            </select>
        </p>

        <script>

            function fnEvtChgTxt(){ 
                alert(document.getElementById('txt').value);               
            }

            function fnEvtChgSlt(){ 
                alert(document.getElementById("slt").value);               
            }

        </script>
        
    </body>
</html>

결과화면을 보자.

입력란에 문자를 넣었을 때와 선택목록에서 값을 선택했을 때 이벤트가 발생되는 것을 알 수 있다.

하지만 여기에는 차이가 있다.

선택목록은 여러개의 값 중 하나가 선택이 된 것으로 작업이 종료되었기 때문에 onchange 이벤트가 즉각적으로 발생한다.

하지만 입력란의 경우 문자를 입력하는 것은 입력중인 상태이기 때문에 즉각적으로 onchange 이벤트가 발생하지 않는다.

다만, 문자열을 입력한 후 마우스로 다른 곳을 클릭하면 이벤트가 발생한다.

그렇기에 입력란은 다른 방법으로 이벤트를 발생시키기도 한다.

키보드의 onkeydown 메서드를 사용하는 방법이다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 마우스아웃 이벤트 사용 javascript onmouseout event (0)	2021.11.01
자바스크립트 마우스오버 이벤트 사용 javascript onmouseover event (0)	2021.10.30
자바스크립트 마우스 클릭 이벤트 만들기 javascript mouse onclick event (0)	2021.10.29
자바스크립트 이벤트 종류 마우스 또는 키보드를 클릭하면 동작을 하는 것 (0)	2021.10.28
자바스크립트 객체 구성 요소 프로퍼티 메서드 javascript object property method (0)	2021.10.27

자바스크립트 체인지 이벤트 사용하기 javascript onchange event