- 포커스와 블러 이벤트: focus와 blur, change
-
입력폼에서는
focus(= 포커스가 주어짐)와blur(= 포커스를 벗어남),change(= 값이 변경됨) 이벤트가 발생하게 되는데, 이는 폼에서만 필요한 이벤트이므로 이벤트 버블링은 발생하지 않는다. 한편,focusin은 타겟에 접근하는 순간,focusout은 타겟으로부터 벗어나는 순간이다:
const textarea= document.querySelector('.txt-area-p')
const note= document.querySelector('.para_doc')
let timerId
textarea.addEventListener('focus', (e) => { // textarea 입력영역에 포커스가 주어지면;
timerId= setInterval(() => {
const length= textarea.value.length
note.textContent= `현재 ${length} 글자 입력됨`
}, 100);
});
textarea.addEventListener('blur', (e) => { // textarea 입력영역에서 벗어나면;
clearInterval(timerId)
note.textContent= `* 다 적었나요? 더 적으셔도 됩니다만..`;
});
- 텍스트 입력 이벤트: input와 change
-
입력폼(<input> 요소의
type="text", <textarea> 요소)에서input는 키 입력 시작 시,change는 키 입력 완료 시(Enter 키를 누르거나 포커스를 벗어난 때)를 가리킨다:
☞
<input> 요소의 type= "text" 및 <textarea> 요소에서 value는
텍스트 입력 요소의 value 값(= 문자열)이다!
- 선택된 옵션값 변경 이벤트: change
-
체크박스(<input> 요소의
type= "checkbox"), 라디오 버튼(<input> 요소의type= "radio"), 드롭다운 메뉴(<select> 및 <option> 요소), 슬라이더(<input> 요소의type= "range"), 컬러피커(<input> 요소의type= "color") 에서의change이벤트:
경주 남산은 서라벌의 진산입니다
☞ 라디오 버튼은 자신이 속한 부모요소를 참조해야 한다!
경주 남산은 서라벌의 진산입니다
☞ 드롭다운 메뉴 옵션 값은 <select> 요소를 참조해야 한다!
선택: 1
const select= document.querySelector('.select_1234m')
const p= document.querySelector('.para_selectm')
select.addEventListener('change', (e) => {
const options= e.currentTarget.options
const list= []
for (const opt of options) {
if (opt.selected) list.push(opt.textContent)
}
p.textContent= `선택: ${list.join(', ')}`
});
const el3= document.querySelector('#slider_range')
const value= el3.value
document.querySelector('.log_slider').textContent= `현재 값은 ${value}입니다`
function RangeChange(e) {
const value= e.target.value // 슬라이더가 이동한 지점의 값
document.querySelector('.log_slider').textContent= `현재 값은 ${value}입니다`;
}
el3.addEventListener('input', RangeChange)
const color= document.querySelector('#my_color_v')
color.addEventListener('change', (e) => {
const value= e.target.value
const log= `${value} 색상 선택!`;
const logEl= document.querySelector('.log_color')
logEl.textContent= log
logEl.style.color= value
});
- 파일 읽어오기 이벤트: input와 load
-
파일 읽기(input 요소의
type= "file")에서input(선택 완료 시) 및load(읽기 완료 시) 이벤트:
const el4= document.querySelector('#my_file_box')
const el_info= document.querySelector('.log_file_box')
el4.addEventListener('input', (e) => { // 선택 완료 이벤트 input
const target= e.target
const files= target.files
const file= files[0]
const reader= new FileReader() // 선택된 파일 정보 객체
reader.readAsText(file) // 파일 내용을 텍스트 형태로 읽어오기
reader.addEventListener('load', () => { // 파일정보 읽기 완료 이벤트 load
el_info.textContent= reader.result
});
});
☞
FileReader 객체를 통해 <input> 요소로 선택한 파일 정보에 접근할 수 있는데,
비동기 방식이므로 읽기작업 완료 이벤트인 load를 써주어야 한다
- load 이벤트 완료 후 FileReader.result 속성으로 데이터에 접근할 수 있고,
사용자가 선택한 파일을 가져와서 표시할 때는 readAsText()/readAsDataURL() 메서드를 사용할 수 있다