[JS](Event) onfocus, onblur, onchange

 

HTML 요소 포커싱

 

HTML 요소의 포커싱 관련 이벤트로 onfocus 와 onblur가 있다,

이 두 이벤트는 서로 짝궁이다.

 

여기서 '포커싱' 이란 HTML 요소가 마우스 클릭 혹은 Tab키로 선택이 가능한 것을 의미한다.

모든 HTML 요소가 다 포커싱 가능한 것은 아니다.

기본적으로 포커싱 가능한 HTML 요소로는 a, button, details, input, select, textarea 가 있고 이 요소들을 대화형 요소 라고 부른다.

onfocus, onblur

onFocus 이벤트는 엘리먼트(또는 자식 엘리먼트) 가 포커스 될때 호출 된다.

예를 들어 텍스트 인풋을 클릭했을 때 호출된다. (console 창에 확인 가능하다)

<input onFocus={() => console.log('Focused on input')}

input창을 클릭했을 때 개발자도구에 'Focused on input' 이 찍히는 것을 확인할 수 있다

 

 

onBlur 이벤트는 엘리먼트에서 포커스가 사라졌을때 호출된다.예를 들어 유저가 포커스된 텍스트 인풋의 바깥 영역을 클릭했을 때 호출 된다.

 

<input onBlur={() => console.log('Triggered because this input lost focus')}

input의 바깥 창을 클릭했을 때 개발자도구에 'Triggered because this input lost focus'가 찍히는 것을 확인할 수 있다.

 

 

onchange

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

ex) onfocus&onblur이벤트는 console 안에 확인 할 수 있다.onchange 이벤트는 selecbox등에서 값이 변경될 때 사용한다.

 

 

ex2) 

사용자가 <select> 요소 (element)의 옵션(option)을 변경(change) 할 때 JavaScript가 실행된

 

이 이벤트 속성은 oninput 이벤트 속성과 유사합니다.

차이점은 oninput은 요소 값이 변경된 직후에 발생하지만 onchange는 요소가 포커스를 잃을때 발생한다.

둘 다 <select> 요소에 사용할 수 있다.