Event 알아보기

Event란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 뜻한다.
그리고 자바스크립트를 이용하여 특정 요소에 상호작용적인 반응하는 동작을 실행시킬 수 있다.

Event Type / 이벤트 타입

발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다. = 이벤트 종류

마우스, 키보드, HTML DOM 등을 처리하는 이벤트가 있다.

Event specification / 이벤트 명세

이벤트 들의 종류가 늘어남에 따라 3가지 기준으로 나누어져 정의되고 있다.

• DOM Level 3 이벤트 명세
• HTML5 관련 이벤트 명세
• 모바일 장치를 위한 명세

Event listener / 이벤트 리스너

이벤트가 발생했을 때, 그 처리를 담당하는 함수이다. 인자로 받은 값을 실행시킨다.

이벤트 리스너를 등록시키는 방법은 두 가지가 있다.
1) 이벤트 대상인 객체나 요소에 프로퍼티로 등록
2) 객체나 요소의 메서드에 이벤트 리스너로 전달

1) 이벤트 대상인 객체나 요소에 프로퍼티로 등록

객체나 요소에 프로퍼티로 등록하는 방법은 1.자바스크립트 코드에서 프로퍼티로 와 2.HTML태그의 속성으로 한다.

1. 자바스크립트 코드에서 프로퍼티로 등록

• 대부분의 브라우저에서 지원
• 이벤트 타입별로 하나의 이벤트 리스너만 등록 가능

2. HTML태그의 속성으로 등록

• HTML 코드에 추가됨으로 가독성이 떨어짐
• 유지보수가 힘듦

2) 객체나 요소의 메서드에 이벤트 리스너로 전달

객체나 요소의 메서드에 이벤트 리스너로 전달하는 방법은 1.addEventListener() 와 2.attachEvent() 한다.

• addEventListener() 메서드는 거의 모든 브라우저에서 지원
• 익스플로러8과 몇몇 브라우저에서는 addEventListener()메서드를 지원하지 않기 때문에 attachEvent()를 사용해서 대체

addEventListener() 문법

객체(요소).addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달

실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달

이벤트 전파 방식 : false면 *버블링(bubbling) 방식으로, true면 *캡처링(capturing) 방식으로 이벤트를 전파

• 버블링 전파 방식은 이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식입니다.
• 캡쳐링 전파 방식은 이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식입니다.

• 이벤트 리스너를 프로퍼티로 등록할 때는 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 한다.

예제

let showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
showBtn.addEventListener("click", showText);  // 선택한 요소에 click 이벤트 리스너를 등록함.
function showText() {
document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
// HTML에 아이디가 'text'인 요소에 위에 내용을 추가하는 함수.
}

---

결과
1. 텍스트 보여주기! 라는 버튼을 클릭하면,
2. 등록했던 이벤트 리스너가 실행되어 짜짠~!! 텍스트가 나타났어요!!라는 텍스트가 추된다.

여러 개의 이벤트 리스너를 등록해보자.

addEventListener() 사용하면 객체에 여러 이벤트 리스너를 등록할 수 있다.

예제

let btn = document.getElementById("btn");        // 아이디가 "btn"인 요소를 선택함.
btn.addEventListener("click", clickBtn);         // 선택한 요소에 click 이벤트 리스너를 등록함.
btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함.
btn.addEventListener("mouseout", mouseoutBtn);   // 선택한 요소에 mouseout 이벤트 리스너를 등록함.
function clickBtn() {
    document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
}
function mouseoverBtn() {
    document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
}
function mouseoutBtn() {
    document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
}

---

한 객체에 3개의 이벤트 리스너를 등록한 상태.
결과

• 초기 화면
  
• 버튼 위에 마우스가 있을 때
  
• 마우스가 버튼 밖에 있을 때
  
• 버튼을 클릭했을 때
  
  

이벤트 리스너를 삭제해보자.

removeEventListener() 사용하면 등록된 이벤트 리스너를 삭제할 수 있다.

let btn = document.getElementById("btn");
function clickBtn() {
    document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
}
btn.addEventListener("click", clickBtn);   
btn.removerEventListener("click", clickBtn);

위처럼 등록했었던 이벤트 리스너를 삭제할 수 있다.