Javascript) keyEvent(keydown, keypress, keyup), FocusEvent(focus, blur), submitEvent

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

keyEvent

 

HTML 코드

<fieldset>
    <legend>KeyEvent | FocusEvent</legend>
    <input type="text" id="message">
    <span id="message-display"></span>
</fieldset>

Javascript 코드

 

keydown

message.addEventListener('keydown', (e) => {
    console.log('keydown');
    console.log(e);
});

 

keypress

- 기능키 (ctrl, shift...) / 한글일 때는 발생하지 않음

message.addEventListener('keypress', (e) => {
    console.log('keypress');
    console.log(e);
});

 

한글과 기능키가 입력될 때는 발생하지 않습니다.

 

keyup

message.addEventListener('keyup', (e) => {
    console.log('keyup');
    console.log(e);
});

 

key : 문자

code : KeyEvent에서 정한 키워드

keyCode : ascii code (대소문자 구분하지 않음)

속성 값 중 key는 입력된 문자를 의미하며, code는 keyEvent에서 정한 키워드, keyCode는 ascii code를 나타냅니다.

다만, 대소문자에 대한 구분이 없으므로 유의!

 

실시간으로 문장 입력 출력하기

message.addEventListener('keyup', (e) => {
    // console.log('keyup');
    console.log(e);

    if(e.keyCode === 13) {
        alert(e.target.value);
        e.target.value = "";
    };

    document.querySelector("#message-display").innerHTML = e.target.value;
});

엔터 입력 시

실시간으로 문자 입력되는 것을 #message-display의 innerHTML에 입력이 됩니다.

엔터의 keyCode를 이용하여 엔터가 입력되면 입력한 문장을 보여주고 초기화 시켜주었습니다.

---

FocusEvent

 

focus

message.addEventListener('focus', (e) => {
    console.log(e);
});

message에 커서가 올라가면 focus이벤트가 발생됩니다.

 

message.addEventListener('focus', (e) => {
    console.log(e);
    e.target.style.backgroundColor = 'blue';
    e.target.style.color = 'white';
});

focus이벤트가 발생하면 배경색과 글꼴색이 변경되게끔 해줄 수도 있습니다.

 

blur

message.addEventListener('blur', (e) => {
    console.log(e);
});

focus가 아웃되면 blur 이벤트가 발생하는 것을 알 수 있습니다.

 

message.addEventListener('blur', (e) => {
    console.log(e);
    e.target.style.backgroundColor = "";
    e.target.style.color = 'inherit';
});

focus가 아웃되면 기존 설정으로 돌아오게끔 해줄 수도 있습니다.

 

---

submit 이벤트

- 실제 submit 되기 직전에 발생

- 입력 값들에 대한 유효성 검사 실시

 

폼 제출 방지

- return false : 핸들러 즉시 중지, addEventListener로 추가된 핸들러에서는 작동하지 않음

- preventDefault() : 이벤트 기본 작동만 중지하며 함수는 마저 실행

 

HTML 코드

<form action="javascript:signup();" name="signupFrm">
    <fieldset>
        <legend>회원가입</legend>
        <label for="userId">아이디(이메일) : </label>
        <input type="email" name="userId" id="userId">
        <br>
        <label for="password">비밀번호 : </label>
        <input type="password" name="password" id="password">
        <br>
        <label for="passwordCheck">비밀번호(재확인) : </label>
        <input type="password" name="passwordChekc" id="passwordCheck">
        <br>
        <input type="submit" value="회원가입">
    </fieldset>
</form>

 

Javascript 코드

 

submit

form 태그의 경우 document에서 name속성으로 바로 접근 가능!

document.signupFrm.onsubmit = (e) => {
    alert("submit");
};

const signup = () => {
    alert('회원가입 성공!');
};

실제 제출이 되기 전 onsubmit 이벤트가 먼저 발생한 후 실제 제출(submit)이 일어나는 것을 확인할 수 있습니다.

 

폼 제출 방지

return false

document.signupFrm.onsubmit = (e) => {
    alert("submit");

    return false;
};

const signup = () => {
    alert('회원가입 성공!');
};

return false;를 이용하여 실제 폼이 제출이 안되도록 하였습니다.

따라서 'submit'만 출력되고 '회원가입 성공!'은 출력되지 않은 것을 확인할 수 있습니다.

 

preventDefault()

document.signupFrm.onsubmit = (e) => {
    alert("submit");

    // return false;
    e.preventDefault();
};

const signup = () => {
    alert('회원가입 성공!');
};

preventDefault()를 이용해서 실제 폼 제출을 방지할 수도 있습니다.

 

이를 이용하여 유효성 검사를 실시할 수도 있습니다.

document.signupFrm.onsubmit = (e) => {
    alert("submit");

    // 비밀번호 유효성 검사
    if(password.value.trim().length < 4) {
        alert('비밀번호는 4글자 이상이어야 합니다.');
        password.select();
        return false; // 이하로는 실행되지 않음
        // e.preventDefault(); // 기본 작동을 막을뿐 함수 실행을 막는 것은 아님
    };

    if(password.value !== passwordCheck.value) {
        alert('두 비밀번호가 일치하지 않습니다.');
        password.focus();
        e.preventDefault();
    };
};

 

4글자 이하 입력 시

select()를 이용하여 password가 블럭처리 되도록 하였습니다.

또한 폼 제출을 방지하였기 때문에 '회원가입 성공!'이 출력되지 않았습니다.

 

만일, return false가 아니라 preventDefault()를 이용했다면 다음 함수 또한 실행하기 때문에 password의 value와 passwordCheck의 value 값도 비교하게 됩니다.

다르다면, '두 비밀번호가 일치하지 않습니다.'도 출력되게 되는 것이죠.

 

일치하지 않는 비밀번호 입력 시

focus()를 이용하여 일치 하지 않으면 password에 커서가 가도록 하였습니다.

마찬가지로 preventDefault()를 이용해 실제 폼 제출을 방지하였기 때문에 '회원가입 성공!'이 출력되지 않습니다.

 

focus가 아웃될 때 - blur이벤트가 실행 될 때 유효성 검사도 가능!

passwordCheck.addEventListener('blur', (e) => {
    if(password.value !== passwordCheck.value) {
        alert('두 비밀번호가 일치하지 않습니다.');
        password.focus();
        e.preventDefault();
    }
});