이벤트(Event)

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

---

이벤트리스너(Event Listener)

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

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

이벤트 핸들러(Event Handler)

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

---

인라인 이벤트 모델

요소 내부에 이벤트 리스터,핸들러 작성하는 방법

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

<button onclick="fnTest1(this)">인라인 이벤트 모델 확인용 버튼</button>

function fnTest1(btn) {
    btn.style.color = "white"
    btn.style.backgroundColor = "black";
    btn.style.cursor = "pointer";
}

---

고전 이벤트 모델

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

document.getElementById("btn1").onclick = function() {
    alert('버튼 클릭됨')

    // 고전/표준 이벤트모델 장점
    // -> 이벤트 제거가 가능함
    
    // 요소의 속성 중 on이벤트명 속성에 함수대신 null을 대입하여
    // 이벤트 삭제(변수에 값을 새로 대입하여 덮어쓰기 하는 원리)
    document.getElementById("btn1").onclick = null;
}

---

표준 이벤트 모델

• W3C에서 공식적으로 지정한 이벤트 모델

요소.addEventListener("이벤트명", 함수)

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

// 표준 이벤트 모델
const btn2 = document.getElementById("btn2");

// 요소.addEventListener("이벤트명", 함수)
btn2.addEventListener("click", function() {

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

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

// 고전이벤트 모델의 단점 보완한 것 확인해보기!
btn2.addEventListener("click", function() {
    this.style.fontSize = "20px";
    this.style.color = "red";
    this.style.fontWeight = "bold";
})

---

배경색이 입력한 값으로 변하는 박스

document.getElementById("input1").addEventListener("keyup", function() {
    // 박스 요소 선택
    const div1 = document.getElementById("div1");

    div1.style.backgroundColor = this.value;
})