js event

string의 길이

string.length

const ok1= document.querySelector("#login input");
const ok2 = document.querySelector("#login button")
function whenEvent()
{
    if(ok1.value.length < 15)
    {
        alert("too short");
    }
    console.log(ok1.value);
    
}
ok2.addEventListener("click",whenEvent);

위와 같은 기능은 html 자체로 구현 가능

Input을 <form> 으로 묶고 내부에 required 조건으로 칸을 채워야 하거나, maxlength="15" 와 같이 할 수 있음.

그렇지만 이런 기능을 사용 했을때 버튼을 누르면 새로고침이 된다.

 

 

3번째 줄에서 whenEvent() 함수 괄호 속에 인자를 넣고

EventListner의 인자로 그 함수를 넣으면

그 함수 괄호 속 인자에 발생한 event에 대한 정보 (event object) 가 담긴다.

그 속에는 관행적으로 event 라는 이름으로 써준다.

그리고 event.preventDefault(); 라는 걸 함수 속에 넣어주면  브라우저의 기본동작(submit 후 새로고침) 을 막는다.

 

js코드

const ok1= document.querySelector("#login");
function whenEvent(event)
{
    event.preventDefault();
    console.log(event);
    
}
ok1.addEventListener("submit",whenEvent);

html

 	<div id="login">
    <form>
    <input required type="text">
    <button>Log in</button>
    </form>
    </div>