[javascript] 변경 감지 이벤트 onchange, oninput 차이

onchange

onchange 이벤트는 값이 변경된 직후가 아니라, 변경되고 포커스를 잃을 때 발생한다.

입력 : <input id="input"/>

const input = document.getElementById("input");
input.addEventListener("change", function(e) {
    console.log("onchange", e.target.value) 
		//값이 바뀔때마다 찍히지 않음. 
		//input바깥을 클릭하면 찍힘
})

onchange이벤트는 selectbox등에서 값이 변경될 때 사용한다.

<select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

const select = document.getElementById("select");
select.addEventListener("change", function(e) {
    console.log("onchange select", e.target.value)
		//값이 바뀔때마다 찍힘
});

oninput

값이 바뀔 때마다 발생하는 이벤트는 oninput이벤트이다.

input.addEventListener("input", function(e) {
    console.log("oninput", e.target.value); // 값이 바뀔때마다 찍힘
})

 

* addEventListenr를 이용하지 않고 직접 함수를 추가할 경우에는 함수명이 oninput, onchange이다.

input.onchange = (e) => {
    console.log("onchange", e.target.value)
}

input.oninput = (e) => {
    console.log("oninput", e.target.value)
}