JavaScript 이벤트

Angela_Hong·2023년 2월 2일

JavaScript

🗂 이벤트란?

웹 브라우저나 사용자가 실행하는 어떤 동작을 말한다.
웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미한다.

웹 문서에서 키보드의 키를 누르는 것도 이벤트,
웹 브라우저 창에 웹페이지를 불러오는 것도 이벤트이다.
단, 이벤트는 웹 페이지를 읽어오거나 링크를 클릭하는 것처럼
웹 문서 영역에서 이루어지는 동작만을 의미한다.

📌 자바스크립트 이벤트는
1) 마우스나 키보드를 사용할 때,
2) 웹 문서를 불러올 때,
3) 폼에 입력할 때 주로 발생한다.

웹페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

🗂 이벤트 처리하기

📂 HTML태그에 함수 연결하기

이벤트가 발생한 HTML 태그에 직접 함수를 연결 : 이벤트를 처리하는 가장 간단한 방법
HTML 태그에 이벤트 처리기를 연결하기 위한 속성을 추가하는데, 속성 이름은 'on이벤트명'으로 표현하고 그 뒤에 함수를 연결한다.
단, 이방법은 HTML태그에 스크립트를 함께 사용하므로 스크립트 소스에서 함수 이름이 바뀌거나 변경 내용이 있을 경우 HTML 소스도 함께 수정해야 한다.
즉, HTML소스와 자바스크립트 소스를 함께 사용하므로 스크립트 부분을 수정하려면 HTML소스 다 뒤져야한다. 비효율적!

// HTML 태그에 함수 연결하기
<태그 on이벤트명 = "함수명">

<button onclick="alert('클릭!')">Click</button>

📂 웹요소에 함수 연결하기

DOM을 사용해 웹 요소를 가져온 후 프로퍼티로 함수를 연결

// DOM을 사용해 함수 연결하기
요소.on이벤트명 = 함수

// 버튼을 클릭해서 문서의 배경색 바꾸기 1
const button = document.querySelector("button");
button.onclick = function(){
	document.body.style.backgroundColor = "green";
}

// 버튼을 클릭해서 문서의 배경 바꾸기 2
// 함수를 미리 만들어둔 상태면 함수 이름만 지정해도 된다
function changeBackground(){
	document.body.style.backgroundColor = "green"
}
const button = document.querySelector("button");
button.onclick = changeBackground;

📂 이벤트 리스너로 이벤트 처리하기

이벤트 리스너란?
이벤트 리스너는 모든 DOM요소에서도 사용할 수 있고, 모든 함수에서도 실행가능하다.
이벤트 리스너를 사용해 이벤트를 처리할 때는 addEventListener()메서드를 사용한다.

요소.addEventListener(이벤트, 함수, 캡처 여부);
// 요소 : 이벤트가 발생한 요소
// 이벤트 : 이벤트 유형, 단 on을 붙이지 않고 이벤트이름 그대로 사용
// 함수 : 이벤트 발생 시 실행할 함수 지정
// 캡처 여부 : 이벤트 캡처링 하는지 여부를 지정 true면 캡처링, false면 버블링 기본값은 false

function changeBackground(){
	document.body.style.backgroundColor = "green";
}
button.addEventListener("click", changeBackground);

// 익명 함수 사용
button.addEventListener("click", function(){
	document.body.style.backgroundColor = "green";
});

// 화살표 함수 사용
button.addEventListener("click", () => {
	document.body.style.backgroundColor = "green";
});

📌 모달 박스란?
화면에 내용이 팝업되면서 기타 내용은 블러 처리되어 팝업된 내용에만 집중할 수 있게 해주는 창이다.

🗂 EVENT 객체

📂 event 객체란?

DOM에는 웹 문서에 발생하는 이벤트 정보를 저장하는 event 객체가 있다.
event 객체에는 어떤 요소에서 이벤트가 발생했는지, 어떤 종류의 이벤트가 발생했는지 등의 정보가 포함된다.

📂 event 객체의 프로퍼티와 메서드

웹문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어진다.
event 객체에는 이벤트 이름이나 발생 위치, 발생한 시간 등 이벤트와 관련된 다양한 정보가 포함되어있다.
그래서 자바스크립트에서 이벤트 처리를 할 때는 event 객체를 자주 사용한다.
프로퍼티는 event객체에 담긴 정보를 의미한다.
그리고 event 객체에서 사용할 수 있는 메서드는 preventDefault()뿐이다.

📕 키보드 이벤트에서 키값 알아내기

프로그램을 사용하다 보면 키보드에서 사용자가 누른 키를 알아야 할 때가 종종 있다.
키 값이 필요할 때, 키 값 역시 event 객체에 담겨 있다.
키보드와 관련된 키 값은 다양한 형태로 제공되지만,
event.code와 event.key를 가장 많이 사용한다.

event.code
event.key

// 키보드 이벤트에서 키값 알아내기
const body = document.body;
const result = document.querySelector("#result");
body.addEventListener("keydown", (e) => {
	result.innerText = ` code: ${e.code}, key: ${e.key}`;
});

🗂 이벤트 전파

이벤트 전파란?
웹 요소에서 이벤트가 발생했을 때 해당 요소에서만 이벤트가 처리되는 것이 아니라 해당 요소를 감싸고 있는 부모 요소, 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리되는 것을 의미한다.
이벤트 전파는 크게 버블링과 캡처링 두 가지 형태로 나뉜다.

📂 이벤트 버블링

이벤트 버블링이란?
특정 요소에서 이벤트가 발생했을 때 그 이벤트가 해당 요소뿐만 아니라 그 요소의 부모요소, 부모요소의 부모요소에도 똑같이 발생한 것으로 간주하는 것이다.
(이벤트가 발생한 요소에서부터 부모요소로, 다시 그 요소의 부모요소로 이벤트가 전달되는 것을 이벤트 버블링이라고 한다
비누 거품이 위로 퍼져나가는 모양)
모던 웹 브라우저에서 대부분의 이벤트는 버블링된다.

📂 이벤트 캡처링

웹 브라우저에서는 대부분 기본적으로 이벤트 버블링이라는 전파방식을 사용한다.
하지만 가끔 이벤트 캡처링 방식이 필요한 경우가 생길 수 있으므로 이벤트 캡처링에 대해서도 알고 있어야 한다.
이벤트 캡처링은 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식이다.
버블링이 아래에서 위로 전파된다면 캡처링은 위에서 아래로 이벤트가 전파되는 방식이다.
이벤트 리스너에서 세번째 옵션은 기본적으로 false를 사용하므로 이벤트 캡처링을 사용하려면 이 옵션을 true로 지정해야한다

🗂 이벤트 핸들러란?

이벤트가 발생하게 되면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해주어야한다.
브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 통지해준다.
이 과정을 통해 사용자와 웹페이지는 상호작용이 가능하게 된다.
이벤트가 발생하면 그에 맞는 반응을 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행 된다. 이 함수를 이벤트 핸들러라 하고, 이벤트에 대응하는 처리를 기술한다.

📂 이벤트 핸들러 등록

이벤트가 발생했을 때 동작할 이벤트 핸들러를 이벤트에 등록하는 방법 3가지

1) 인라인 이벤트 핸들러 방식
HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법
하지만, 이 방식은 사용하면 안된다. HTML과 JavaScript는 관심사가 다르므로 분리하는 것이 좋기 때문이다

2) 이벤트 핸들러 프로퍼티 방식
인라인 이벤트 핸들러 방식처럼 HTML과 JavaScript가 뒤섞이는 문제를 해결할 수 있는 방식
하지만, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩할 수 있다는 단점이 있다.

3) addEventListener 메소드 방식
addEventListener 메소드를 이용하여 대상 DOM요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정하는 방식

addEventListener 함수 장점

하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다

캡처링과 버블링을 지원한다

HTML 요소뿐만 아니라 모든 DOM요소에 대해 동작한다. 브라우저는 웹문서를 로드한 후 파싱하여 DOM을 생성한다.
<html>
  <body>
    <script>
      addEventListener('click', function(){
		alert('Clicked!');	
	  });
    </scirpt>
  </body>
</html>
이와 같이 대상 DOM요소 target을 지정하지 않으면
전역객체 window 즉 DOM문서를 포함한 브라우저의 윈도우에서 발생하는 click이벤트에 이벤트 핸들러를 바인딩한다.
따라서 브라우저 윈도우 어디를 클릭하여도 이벤트 핸들러가 동작한다.
function foo(){
	alert('clicked'!);
}
elem.addEventListener('click', foo());
// 이벤트 발생 시까지 대기하지 않고 바로 실행된다
elem.addEventListener('click', foo);
// 이벤트 발생 시까지 대기한다
// 두 번째 매개변수에는 함수 호출이 아니라 함수 자체를 지정해줘야한다!