5. 이벤트

이벤트(Event)

1. Event: 브라우저 상에서의 동작, 행위 

   ex) click, keyup~press, mouseover~leave.. 

 

2. Event Listener: 이벤트가 발생하는 것을 대기하고 있다가 발생 시 연결된 기능(함수) 수행 

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

 

3. Event Handeler: 이벤트와 리스너에 연결된 기능(함수), 이벤트가 발생했을 때 수행하고자 하는 함수 

 

 

인라인 이벤트 모델 

요소 내부에 이벤트 리스너/핸들러를 작성

(형식) on이벤트명 = "함수명()"

<button onclick="eventTest1(this)">인라인 이벤트</button>

function eventTest1(btn){
    btn.style.backgroundColor = "pink"
}

 

고전 이벤트 모델

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

    <h3>고전 이벤트 모델</h3>
    <button id="btn1">고전 이벤트</button>

document.getElementById("btn1").onclick = function() {
    alert("고전 이벤트 모델 확인")
}

document.getElementById("btn1").onclick = function() {
    alert("고전 이벤트 모델은 마지막에 작성된 핸들러만 나온다.")
}

→ 고전적 이벤트 모델의 단점   

    : 한 요소에 동일한 이벤트 리스너(onclick, onmouseover..)에 대한 다수의 이벤트 핸들러를 적용할 수 없다. 

      마지막으로 대입된 핸들러만 적용이 된다.(표준모델을 사용하면 가능)

 

 

표준 이벤트 모델

W3C에서 공식적으로 지정한 이벤트 모델(가장 많이 사용)

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

 - 고전 이벤트 모델의 단점 보완 가능(한 요소에 여러 핸들러 설정 가능) 

 

👍 고전, 표준모델의 장점: 이벤트 제거가 가능하다

    - 요소의 속성 중 on이벤트명(이벤트리스너) 속성에 함수 대신 null을 대입하여 이벤트 삭제 

 

 

 

---

 

🥸 실습: 배경색이 입력한 값으로 변함

    <div id="box"></div>
    <input id="color">

document.getElementById("color").addEventListener("keyup", function(){
    const box = document.getElementById("box")
    box.style.backgroundColor = this.value
})

 

🥸 실습: 마우스를 올리면 박스가 늘어나며 배경색이 바뀌고 마우스를 내리면 박스가 사라짐

    <div id="box"></div>

document.getElementById("box").addEventListener("mouseover", function(){
    this.style.width = "300px"
    this.style.backgroundColor = "pink"
})

document.getElementById("box").addEventListener("mouseleave", function(){
    this.style.width = "0px"
    this.style.visibility = "hidden"
})