(JS) 이벤트

이벤트(Event)

• 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생
• 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음
• 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델

<input type="button" onclick="sendit()" value="확인">
            -------  -------  --------
            이벤트타겟 이벤트타입 이벤트리스너

<button type="button" onclick="sendit()">확인</button>

이벤트 타입(Event Type)

• 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함
• 키보드, 마우스, HTML DOM, window 객체... 등을 처리하는 이벤트 제공
• https://developer.mozilla.org/ko/docs/Web/API/Event

이벤트 타겟(Event Target)

• 이벤트가 일어날 객체를 의미

이벤트 리스너(Event Listener)

• 이벤트가 발생했을 때 그 처리를 담당하는 함수
• 이벤트 핸들러라고도 부름
• 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트리스너를 실행

// 이벤트 등록
객체.addEventListener(이벤트타입, 이벤트리스너);

// 이벤트 제거
객체.removeEventListener(이벤트타입, 이벤트리스너);

이벤트 객체(Event Object)

• 특정 타입의 이벤트와 관련이 있는 객체
• 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음
• 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있음
• 이벤트 객체를 이벤트 리스너가 호출할 때 인수로 전달

function sendit(e){
    // e.target(), e.type(click)

}

<input type="button" onclick="sendit()" value="완료">

문제

• 버튼 2개를 아래와 같이 만들고 각 버튼을 누르면 콘솔에 출력하는 문서를 만들어보자. (단 이벤트 객체를 이용하여 버튼을 구별함)

버튼1을 클릭 -> 버튼 1이 눌렸어요
버튼2을 클릭 -> 버튼 2가 눌렸어요

window.onload = function(){
    버튼과 이벤트리스너 세팅!
}

function clockBtn(e){
    버튼을 구별하여 버튼의 출력을 결정
}

이벤트 전파(Event Propagation)

• 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정

• document 객체나 html 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남

• 버블링 전파방식

  • 자식에서 부모로 이벤트를 전파

• 캡처링 전파방식

  • 부모에서 자식으로 이벤트를 전파

• 이벤트 전파를 막는 방법

이벤트객체명.stopPropagation();