이벤트(Evnet)

이벤트 :
            -> 브라우저에서 동작, 행위
            click, keydown, keypress, keyup,
            mouseover, mouseout, mouseleave, mouseenter,
            change, submit...
            


            이벤트 리스너(Evnet Listner)
            -> 이벤트가 발생하는 것을 대기하고 잇다가
            이벤트 발생이 감지되면 연결된 기능(함수)를 수행함 

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


            이벤트 핸들러(Event Handler)
            -> 이벤트 리스너에 연결된 기능(함수)
                이벤트가 발생했을 때, 수행하고자 하는 내용을 작성하는 함수

인라인 이벤트 모델

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

<button onclick="fnTest1(this)">인라인 이벤트 모델 확인용 버튼</button> 
    <!-- onclick -> 리스너, fnTest1 -> 핸들러 -->

고전 이벤트 모델

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

document.getElementById("btn1").onmouseover = function(){
    // 마우스가 요소 위로 올라 왔을 때
    document.getElementById("btn1").style.backgroundColor = "red";
}

고전 이벤트 모델 단점
-> 한 요소에 동일한 이벤트 리스너에 대한
다수의 이벤트 핸들러를 작성할 수 없다.
리스너 -> 온클릭 / 핸들러 -> 함수
(마지막으로 대입된 이벤트 핸들러만 적용)
-> 해결 방법: 표준 이벤트 모델을 사용한다.

표준 이벤트 모델

const btn2 = document.getElementById("btn2");

// btn2.addEventListner("이벤트명", 함수);

btn2.addEventListener("click", function(){

    // 이벤트 핸들러 내부에 작성된 this == 이벤트가 발생한 요소를 말함
    console.log(this);

    this.style.backgroundColor = "pink";
    this.style.border = "3px solid red";
    this.style.padding = "10px";
    this.style.display = "block";
})