[JavaScript] 이벤트

📌이벤트(event) : 동작, 행위 

-> 브라우저에서의 동작, 행위 : click, keydown, keyup, mouseover, drag, submit, change,...

 

🔊 이벤트 리스너(Event Listener) 

이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수)를 수행하는 것

ex) onclick, onkeyup, onchange, onsubmit...(on 이벤트명)

onclick = "함수명()"

 

🔊 이벤트 핸들러(Event Handler)

이벤트 리스너에 연결된 기능으로 이벤트 발생 시 수행하고자 하는 내용을 작성해둔 함수(function)

onclick = "함수명()"

 

📌이벤트 모델 

🔊 인라인 이벤트 모델 

: 요소 내부에 이벤트를 작성하는 방법

: on 이벤트 명 = 함수명( ) 형태로 작성함 

//HTML 코드 
<button onclick="test1(this)">인라인 이벤트 모델 확인</button>

//JS 코드 
function test1(button){
    button.style.backgroundColor="pink";
    button.style.color="white";

}

 

 

⭐ 고전/ 표준 이벤트 모델은 랜더링된 HTML요소에 이벤트 관련된 동작을 부여하는 코드로  랜더링 되지 않은 요소에는 이벤트 관련 동작을 추가 할 수 없다! HTML 위에서 아래로 해석되다 보니 JS 코드를 BODY 태그 마지막에 작성되어야한다.  JS코드 :  <script src="js/06_이벤트.js"></script>

 

 

🔊 고전  이벤트 모델

요소가 가지고 있는 이벤트 속성(이벤트 리스너)에 이벤트 핸들러를 연결하는 방법으로

인라인 모델처럼 HTML 요소에 JS 코드가 포함되는 것이 아닌  script에만 이벤트 관련 코드를 작성할 수 있다.

 

❗ 단점 

-> 한 요소에 동일한 이벤트 리스너에 대한 다수의 이벤트 핸들러를 작성 할 수 없다 ! 

    덮어씌어져 마지막에 작성된 핸들러만 적용된다!

//HTML 코드 

<button id="test2-1">고전 이벤트 모델 확인 </button>
<button id="test2-2">test2-1 이벤트 제거 </button>

<button id="test2-3">고전 이벤트 모델 단점 </button>

//RS 코드
document.getElementById("test2-1").onclick = function(){
    
    //익명 함수(이벤트 핸들러에 많이 사용함)
    alert("고전 이벤트 모델로 출력된 대화상자");
}

//이벤트 제거 
document.getElementById("test2-2").onclick=function(){
    
    //test2-1 이벤트 제거
    document.getElementById("test2-1").onclick=null;
    alert("test2-1(고전이벤트모델확인) 이벤트를 제거하였습니다.");
}

 

🔊 표준 이벤트 모델

: 한 요소에 여러 이벤트 핸들러를 설정할 수 있다. (고전 이벤트 모델 단점 보완)

HTML 코드 
<div id="test3">클릭하면 크키가 늘어나요~</div>

RS 코드
document.getElementById("test3").addEventListener("click",function(){})

    
    //this : 이벤트가 발생한 요소
    console.log(this.clientWidth); // 현재 요소의 너비 (테두리 제외)
    
    //this.style.width="300px"; //현재 요소 너비 변경
    //(this.clientWidth+"20px"-> 이어쓰기가 된다 20020으로 커짐!)
    this.style.width=this.clientWidth + 20 + "px";
})

document.getElementById("test3").addEventListener("click",function(){}) -> test3인 아이디에 요소에 click이라는 기능을 눌렀을때 { }에 있는 기능을 수행한다!

 

📚 a 태그 기본 이벤트 제거  e.preventDefault();

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

    //매개변수 e 또는 event = 이벤트 발생 객체(이벤트와 관련된 정보가 담겨있는 객체)
    
    e.preventDefault(); //HTML 요소가 가지고 있는 기본 이벤트를 막음 (제거)

    // prevent : 막다, 방지하다, 예방하다
    // Default : 기본, 기본값
})

e는 html에 작성된 아래 부분을 의미한다. 
<a href="https:www.naver.com" id="moveNaver">네이버로이동</a>

📚 submit 버튼을 사용 안하는 방법  document.testForm1.submit();

document.getElementById("testBtn1").addEventListener("click",function(){

    //#in1에 입력 값 얻어오기
    const in1 = document.getElementById("in1").value;

    //#in1에 작성된 값이 "제출"일 경우 testForm1을 submit
    if(in1 == '제출'){
        
        // ** form 태그의 name속성이 있을 경우 직접 선택 가능
        // document.form태그의 name 속성 값
        
        // ** form요소.submit() : form요소 제출 함수 
        document.testForm1.submit();
    }
})

📚 submit 버튼을 사용 안하는 방법 

onsubmit : form 태그가 제출이 되었을때 -> 제출하기 버튼이 클릭되었을 때를 의미
만일, submit을 막고 싶다면 아래와 같이 작성하면 된다. 

onsubmit = "return false" 

function checkIn2(){

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

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

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

}