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);

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