[JavaScript] 추가 함수 정리

➰ 문자열.trim() : 문자열 양 끝에 공백을 모두 제거

ex) "                    k          h         ".trim()->"k          h"

 

➰ 키보드 이벤트 

 onkeydown : 키가 눌러졌을 때 (키보드을 누르자마자!)
 onkeypress : 키가 눌러지고 있을 때 (키보드을 누르고 있을때 == 실제로 글자를 쓸때)
 onkeyup : 키를 눌렀다 땠을때 (사용빈도 ↑ )

 

➰ 버튼 색 바꾸기

방법 1) 요소를 문서에서 찾아서 선택

document.getElementById("test2-3").onclick=function(event){

 document.getElementById("test2-3").style.backgroundColor="pink";
}

방법 2) 매개변수 e 또는 event 활용하기 
     -> 이벤트 핸들러에 e 또는 event를 작성하는 경우
        해당 이벤트와 관련된 모든 정보가 담긴 이벤트 객체가 반환된다. 

document.getElementById("test2-3").onclick=function(event){

 event.target.style.backgroundColor="skyblue";
}

방법 3) this 활용하기 -> 이벤트가 발생한 요소 (event.target과 동일)
     console.log(this);

document.getElementById("test2-3").onclick=function(event){
	
    this.style.backgroundColor="red";
}

 

➰ HTML 요소가 가지고 있는 기본 이벤트를 막음 : e.preventDefault( )

html코드
<a href="https:www.naver.com" id="moveNaver">네이버로이동</a>

rs코드
document.getElementById("moveNaver").addEventListener("click",function(e){

    e.preventDefault(); //HTML 요소가 가지고 있는 기본 이벤트를 막음 (제거)

})

➰ form요소 제출 함수 : 요소.submit ( )

➰ form요소 제출 못하도록 막는 함수 : onsubmit = "return false"

html 코드 
     <form action="01_JS개요.html" onsubmit="return checkIn2()" >

        입력 : <input type="text" name="in2" id="in2">

        <button type="submit">제출하기</button>
    </form>


rs 코드 

function checkIn2(){

    //#in2에 "제출"이 입력된 경우만 submit(return true);

    const in2 = document.getElementById("in2").value;

    if(in2 == '제출'){
        return true;
    }else{
        return false;
    }

}