1. 이벤트

이벤트

• HTML 화면에서 할 수 있는 모든 행동
  (click, mouseover, mouseout, keydown, keypress, keyup 등)
  • https://www.w3schools.com/jsref/dom_obj_event.asp

• 이벤트 리스너(event listener):
  HTML 문서에서 이벤트가 발생하는 것을 감지해서 이벤트가 감지되면 연결된 기능(함수)을 수행
  (onclick, onkeyup, onsubmit 등)
• 이벤트 핸들러(event handler):
  이벤트 리스너에 연결된 기능(함수)으로 이벤트가 발생했을 때 어떤 일을 처리할 것인가 정의

인라인 이벤트 모델

• 요소 내부에 이벤트를 작성하는 방식
• 인라인 방식은 <script> 태그에 있는 함수를 호출하는 방식 선호

<!-- this: 이벤트가 발생한 요소 -->
<button onclick="test1(this)">인라인 이벤트 모델 확인</button>

고전 이벤트 모델

• 요소가 가지고 있는 이벤트 속성(이벤트 리스너)에
  이벤트 핸들러(함수)를 직접 대입해 연결하는 방식
• 인라인 이벤트 모델처럼 HTML 요소에 이벤트 리스너/핸들러가 포함되는 것이 아닌
  JS만을 이용하여 이벤트 관련 코드를 작성할 수 있음
• 한 요소에 여러 이벤트 핸들러를 연결할 수 없다는 단점이 있다.

document.getElementById("test2a").onclick = function(){
    // function(){}: 익명 함수(이름이 없는 함수)
    alert("고전 이벤트 모델로 출력된 내용");
}

표준 이벤트 모델(addEventListener)

• 요소가 가지고 있는 이벤트 리스너를 추가하여
  여러 이벤트 핸들러가 동작할 수 있도록 만든 방식
• W3C에서 공식으로 지정한 이벤트 모델

const test3 = document.getElementById("test3");
test3.addEventListener("click", function(){
    // 요소.clientWidth: 요소의 너비(CSS로 지정된 값을 읽어옴, readonly)
    test3.style.width = test3.clientWidth + 20 + "px";
});
test3.addEventListener("click", function(){
  	// 요소.clientHeight: 요소의 높이(CSS로 지정된 값을 읽어옴, readonly)
    this.style.height = this.clientHeight + 20 + "px";
});
test3.addEventListener("click", function(e){
    // 이벤트 핸들러의 매개변수 e 또는 event: 현재 발생한 이벤트에 대한 모든 정보를 담고 있는 객체(이벤트 객체)
    const currentWidth = e.target.clientWidth;
    if(currentWidth > 500 - 20){
        e.target.style.width = "200px";
        e.target.style.height = "200px";
    }
});

익스플로러 이벤트 모델

• 익스플로러 브라우저 적용 모델
• 한번에 여러 이벤트 핸들러 설정 가능