키보드 이벤트


* keyup 이벤트 예:

                                
                                    
                                
                            
                                
                                    const input= document.querySelector('.input_state')
                                    const p_log= document.querySelector('.para_text')

                                    const isEmail= (value) => {
                                        return (value.indexOf('@') !== -1) && (value.split('@')[1].indexOf('.') !== -1);
                                    };

                                    input.addEventListener('keyup', (e) => { // 입력 상황을 실시간으로 반영하기 위해 change가 아닌 keyup 이벤트를 씀!
                                        const value= e.currentTarget.value

                                        if (isEmail(value)) {
                                            p_log.style.color= 'green'
                                            p_log.textContent= `맞는 이메일 형식입니다: ${value}`
                                        } else {
                                            p_log.style.color= 'red'
                                            p_log.textContent= `이메일 형식이 아닙니다! ${value}`
                                        }
                                    });
                                
                            

여기서는 실시간으로 입력 상태를 체크하기 위해 <input> 요소에서 (change가 아닌)keyup 이벤트를 사용하였다!