[모던자바스크립트]06 이벤트와 이벤트 처리기

06-1. 이벤트 알아보기

이벤트란

이벤트: 웹 브라우저나 사용자가 실행하는 어떤 동작
ex) 웹 문서에서 키보드의 키를 누르는 것, 웹 브라우저 창에 웹 페이지를 불러오는 것
이벤트는 웹 문서 영역에서 이루어지는 동작만 말함(ex. 웹 페이지 읽어 오기, 링크 클릭하기)
(웹 브라우저 창 맨 위 제목 표시줄을 클릭하는 것은 이벤트가 아님(영역 벗어났으므로))

문서 로딩 이벤트

서버에서 웹 문서를 가져오거나 위아래로 스크롤하는 등 웹 문서를 웹 브라우저 창에 보여주는 것과 관련된 이벤트

이벤트	이벤트가 발생하는 순간
abort	웹 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때
error	문서가 정확히 로딩되지 않았을 때
load	문서가 로딩이 끝났을 때
resize	문서 화면의 크기가 바뀌었을 때
scroll	문서 화면이 스크롤되었을 때
unload	문서를 벗어날 때

// ex) 문서를 불러오자마자 알림창 표시
window.onload = alert("안녕하세요?");

마우스 이벤트

마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트

이벤트	이벤트가 발생하는 순간
click	사용자가 HTML 요소를 클릭했을 때
dbclick	사용자가 HTML 요소를 더블클릭했을 때
mousedown	사용자가 요소에서 마우스 버튼을 눌렀을 때
mousemove	사용자가 요소에서 마우스 포인터를 움직일 때
mouseover	마우스 포인터를 요소 위로 옮길 때
mouseout	마우스 포인터가 요소를 벗어날 때
mouseup	요소 위에 올려놓은 마우스 버튼에서 손을 뗄 때

// ex) 버튼을 클릭했을 때 문서의 배경색 바꾸기
count bttn = document.querySelector("button");

button.onclick = function(){
	document.body.style.backgroundColor = "green";
}

키보드 이벤트

키보드에서 특정 키를 조작할 때 발생하는 이벤트

이벤트	이벤트가 발생하는 순간
keydown	키를 누르는 동안
keypress	키를 눌렀을 때
keyup	키에서 손을 뗄 때

// ex) 키보드에서 키를 눌렀을 때 어떤 키인지 알아내기
const body = document.body;
const result = document.querySelector("#result");

body.addEventListener("keydown", (e) => {
	result.innerText = `
    code: ${e.code},
    key: ${e.key}
    `;
}};

폼 이벤트

폼 요소에 내용을 입력하면서 발생할 수 있는 다양한 이벤트
폼: 사용자가 데이터(정보)를 입력하는 모든 요소 (ex. 로그인, 검색, 게시판, 설문 조사)

이벤트	이벤트가 발생하는 순간
blur	폼 요소가 포커스를 잃었을 때
change	목록이나 체크 상태 등이 변경되었을 때 (<input>, <select>, <textarea> 태그에서 사용)
focus	폼 요소에 포커스를 놓았을 때 (<label>, <select>, <textarea>, <button> 태그에서 사용)
reset	폼이 리셋되었을 때
submit	[submit] 버튼을 클릭했을 때

// ex) 선택 목록에서 옵션을 선택하면 change 이벤트가 발생하고 change 이벤트에 displaySelecter() 함수 연결
const SelectMenu = document.querySelector("#major);

function displaySelect(){
	let selectedText = selectMenu.options[selectMenu.selectedIndex].innerText;
    alert(`[${selectedText}]를 선택했습니다.`);
}

selectMenu.onchange = displaySelect;

06-2. 이벤트 처리하기

이벤트 처리기(또는 이벤트 핸들러): 이벤트를 처리하는 것 (이벤트가 발생하면 그에 따른 연결 동작이 있어야 함)

MTHL 태그에 함수 연결하기

이벤트 처리하는 가장 간단한 방법 → 이벤트가 발생한 HTML 태그에 직접 함수를 연결하는 것
HTML 태그에 이벤트 처리기를 연결하기 위한 속성 추가 (속성 이름: 'on이벤트명'), 그 뒤에 함수 연결

<태그 on이벤트명 = "함수명">

// .html
// ex) 버튼을 클릭했을 때 알림 창을 표시
<button onclick = "alert('클릭!')">Click</button>

위 방법은 HTML 태그에 스크립트를 함께 사용하므로 스크립트 소스에서 함수 이름이 바뀌거나 변경 내용이 있을 경우 HTML 소스도 함께 수정해야 함
즉, HTML 소스와 자바스크립트 소스를 함께 사용하므로 스크립트 부분을 수정하려면 HTML 소스를 다 뒤져야 함

웹 요소에 함수 연결하기

스크리트 소스를 변경해도 HTML 마크업에는 영향을 주지 않게 하려면 이벤트 처리기도 스크립트 소스에서 처리하는 것이 좋음 → DOM을 사용해 웹 요소를 가져온 후 프로퍼티로 함수 연결하기

요소.on이벤트명 = 함수

// ex) 버튼 요소를 가져온 후 버튼을 클릭했을 때 문서의 배경색 바꾸기
const button = document.querySelector("button");

button.onclick = function(){
	document.body.style.background = "green";
}

// ex) 함수를 미리 만들기
function changeBackground(){
	document.body.style.backgroundColor = "green";
}
const button = document.querySelector("button");
button.onclick = chageBackground;	// 실행할 함수 이름 뒤에 소괄호를 사용하지 않음

버튼을 클릭했을 때 배경색과 글자색 바꾸기

// .html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼 클릭</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <p>버튼을 클릭하면 배경색과 글자색이 바뀝니다.</p>
  <button>Click</button>
  <script src="js/ex-1.js"></script>
</body>
</html>

function changeBgText(){
  document.body.style.backgroundColor = "#222";
  document.body.style.color = "#fff";
}
const button = document.querySelector("button");
button.onclick = changeBgText;

이벤트가 발생했을 때 두 가지 이상의 함수가 실행할 경우 문제 발생
→ 'on이벤트명' 프로퍼티를 하나만 사용할 수 있기 때문(가장 마지막에 사용한 onclick 프로퍼티만 적용)
여러 함수를 연결하려면 addEventListener()를 사용해야 함

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

이벤트 리스너는 모든 DOM요소에서도 사용할 수 있고, 모든 함수에서도 실행할 수 있음
이벤트 리스너를 사용해 이벤트 처리할 때 → addEventListener() 메서드(함수)를 사용해야 함

요소.addEventListener(이벤트, 함수, 캡처 여부);

요소: 이벤트가 발생한 요소
이벤트: 이벤트 유형. 단, 여기에서는 이벤트 이름 앞에 on을 붙이지 않고 click이나 keypress처럼 이벤트 이름을 그대로 사용함
함수: 이벤트가 발생했을 때 실행할 함수를 지정. 기존에 있는 함수를 사용해도 되고 직접 익명 함수를 작성해도 됨. 익명 함수로 실행할 때는 event 객체를 사용해 다양한 것들을 처리할 수 있음
캡처 여부: 이벤트를 캡처링하는지의 여부를 지정 (즉, true면 캡처링, false면 버블링 한다는 의미. 선택 사항이며 기본값은 false)

이벤트 리스너를 사용해 문서 배경색 바꾸기

// 이미 만든 함수를 연결
function changeBackground(){
	document.body.style.backgroundColor = "green";
}

button.addEventListener("clcik", changeBackground);

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

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

addEventListener() 함수를 사용해 버튼을 클릭했을 때 문서의 배경색과 글자색을 토글하는 소스 작성

// .html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼 클릭</title>
  <link rel="stylesheet" href="css/main.css">
  <style>
    .convert {
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <p>버튼을 클릭하면 배경색과 글자색이 바뀝니다.</p>
  <button>Click</button>
  <script src="js/ex-2.js"></script>
</body>
</html>

/*const button = document.querySelector("button");

// 미리 .convert 스타일 만들어 놓고 토글하기
button.addEventListener("click", function() {
  document.body.classList.toggle("convert");
});*/

const button = document.querySelector("button");

button.addEventListener("click", () =>{
  document.body.classList.toggle("convert");
});

텍스트 필드에 입력한 글자 수 알아내기

// ex) 텍스트 필드에 단어를 입력했을 때 단어의 길이인 글자 수를 화면에 표시하는 프로그램
const button = document.querySelector("#bttn");

button.addEventListener("click", () => {
	const word = document.querySelector("#word").value;	// 텍스트 필드의 내용
    const result = document.querySelector("#rsult");	// 결괏값을 표시할 영역
    let const = word.length;	// 문자열의 길이
	
    result.innerText = `${count}`;	// 결괏값 표시
});

문자열의 길이는 length 프로퍼티에 들어있음

06-3. event 객체

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

event 객체의 프로퍼티와 메소드

웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어짐
event 객체에는 이벤트 관련 다양한 정보가 포함되어 있음(이벤트 이름, 발생 위치, 발생 시간 등)
event 객체에서 사용할 수 있는 메서드는 preventDefault() 뿐

프로퍼티	기능
altKey	이벤트가 발생했을 때 [Alt]를 누르고 있었는지의 여부를 확인하고 불리언값을 반환
button	마우스 키값을 반환
charCode	keypress 이벤트가 발생했을 때 어떤 키가 눌렸는지 유니코드값으로 반환
clietX	이벤트가 발생한 가로 위치를 반환
clientY	이벤트가 발생한 세로 위치를 반환
ctrlKey	이벤트가 발생했을 때 [Ctrl]을 누르고 있었는지의 여부를 확인하고 불리언값을 반환
pageX	현재 문서를 기준으로 이벤트가 발생한 가로 위치를 반환
pageY	현재 문서를 기준으로 이벤트가 발생한 세로 위치를 반환
screenX	현재 화면를 기준으로 이벤트가 발생한 가로 위치를 반환
screenY	현재 화면를 기준으로 이벤트가 발생한 세로 위치를 반환
shiftKey	이벤트가 발생했을 때 [Shift]을 누르고 있었는지의 여부를 확인하고 불리언값을 반환
target	이벤트가 발생한 대상을 반환
timeStamp	이벤트가 발생한 시간을 밀리초 단위로 반환
type	발생한 이벤트 이름을 반환
which	키보드와 관련된 이벤트가 발생했을 때 키의 유니코드값을 반환

메서드	기능
preventDefault	(취소할 수 있을 경우) 기본 동작을 취소

※ event 객체에서 사용하는 프로퍼티와 메서드 전체 목록 확인
→ 'developer.mozilla.org/ko/docs/Web/API/Event' 참고

마우스 이벤트에서 클릭 위치 알아내기

마우스에서 click 이벤트가 발생했을 때 event 객체를 사용하여 클릭 위치를 알 수 있음

const box = document.querySelector("#box");

box.addEventListener("click", (e) => {
	alert(`이벤트 발생 위치: ${e.pageX}, ${e.pageY}`);
});

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

키보드와 관련된 키값은 다양한 형태로 제공되지만, event.code와 event.key를 가장 많이 사용함
(이전에는 event.keyCode를 사용했지만, 이 프로퍼티는 이제 폐기되어 event.code로 바뀜)

// ex) 키보드에서 키를 누를 때마다 어떤 키를 눌렀는지 알아내는 예제
const body = document.body;
const result = document.querySelector("result");

body.addEventListener("keydown", (e) => {
	result.innerText = `
    code: ${e.code},
    key: ${e.key}
    `;
});

자바스크립트로 캐러셀 만들기

캐러셀: 이미지나 콘텐츠를 슬라이드 쇼처럼 보여 주는 요소

// .html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>캐러셀 만들기</title>
  <link rel="stylesheet" href="css/carousel.css">
</head>
<body>
  <p>좌우 화살표를 눌러 보세요</p>

  <div id="container">
    <div class="arrow" id="left">&lang;</div>
    <div class="arrow" id="right">&rang;</div>
  </div>

  <script src="js/carousel.js"></script>
</body>
</html>

// .css
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

p {
  margin:20px;
  font-size:2em;  
}

#container{
  position:relative;
  width:600px;
  height:300px;
  border:2px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  z-index:100;
  font-size:2em;
  padding:10px;
  background:#ddd;
  color:#222;
  opacity:0.2;
}

.arrow:hover {
  opacity:1;
}

const container = document.querySelector("#container"); // 캐러셀 영역

// 이미지 배열
const pics = ["pic-1.jpg", "pic-2.jpg", "pic-3.jpg", "pic-4.jpg", "pic-5.jpg"];

// 첫 번째 이미지를 기본으로 표시
container.style.backgroundImage = `url(images/${pics[0]})`;

const arrows = document.querySelectorAll(".arrow");  // 화살표
let i = 0;  // 배열 인덱스

arrows.forEach( arrow => {
    arrow.addEventListener("click", (e) => {
        if(e.target.id == "left"){      // 왼쪽 화살표를 클릭한 경우
            i--;                        // 이전 이미지로 이동
            if(i < 0){                  // 첫 번째 이미지인 경우
                i = pics.length - 1;    // 마지막 이미지로 이동
            }
        }
        else if(e.target.id == "right"){    // 오른쪽 화살표를 클릭한 경우
            i++;                            // 다음 이미지로 이동
            if(i >= pics.length){           // 마지막 이미지인 경우
                i = 0;                      // 첫 번째 이미지로 이동
            }
        }
        container.style.backgroundImage = `url(images/${pics[i]})`; // 현재 이미지를 표시
    });
});

// 웹 문서에서 마우스 오른쪽 버튼 비활성화시키기
window.addEventListener("contextmenu", e => {
    e.preventDefault();
    alert("오른쪽 버튼을 사용할 수 없습니다.")
});

06-4. 이벤트 전파

이벤트 전파: 웹 요소에서 이벤트가 발생했을 때 해당 요소에만 이벤트가 처리되는 것이 아니라 해당 요소를 감싸고 있는 부모 요소, 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리됨
이벤트 전파는 '버블링'과 '캡처링' 형태로 나뉨

이벤트 버블링

이벤트 버블링: 특정 요소에서 이벤트가 발생했을 때 그 이벤트가 해당 요소뿐만 아니ㅏㄹ 그 요소의 부모 요소, 부모 요소의 부모 요소에도 똑같이 발생한 것으로 간주하는 것

// .html
// 생략
<body>
  BODY
  <div onclick = "console.log('div')">
    DIV
    <section onclick = "console.log('section')">
      SECTION
      <p onclick = "console.log('p')">P</p>
    </section>
  </div>
</body>
// 생략

가장 안쪽의 'P'를 클릭하면 'SECTION'과 'DIV'를 클릭하면 나타나는 내용도 함께 표시됨
→ P 요소에서 발생한 click 이벤트가 section 요소를 거처 div 요소로 전달되며 해당 요소들의 이벤트 처리기가 함께 실행되었기 때문

event.target과 event.currentTarget

이벤트가 발생하면 해당 이벤트와 관련된 정보는 event 객체에 담겨짐
event 객체의 프로퍼티 중에서 이벤트 전파와 관련이 있는 프로퍼티는 target 프로퍼티와 currentTarget 프로퍼티임

// .html
// 생략
<body>
  BODY
  <div>
    DIV
    <section>
      SECTION
      <p>P</p>
    </section>
  </div>

  <script src="js/propagation.js"></script>
</body>
// 생략

// .js
const elements = document.querySelectorAll('*');  // 모든 요소를 가져와 elements에 저장

 // 모든 요소 순회하면서 click 이벤트 발생했을 때 
 // event.target과 event.currentTarget의 태그명 표시
for (let element of elements) {
  element.addEventListener("click", e => 
    console.log(`event.target : ${e.target.tagName}, event.currentTarget : ${e.currentTarget.tagName}`)
  );
}

// 아래와 같이 for문을 사용할 수도 있습니다.
// for (let i = 0 ; i < elements.length ; i++) { 
//   elements[i].addEventListener("click", function(e) {   
//     console.log(e.target.tagName);                      
//   });
// }

P 영역을 클릭하면 P 영역부터 최상위 요소까지 이벤트가 전파됨
event.target : 처음 이벤트가 발생한 대상
event.currentTarget : 이벤트가 전파되면서 현재 이벤트 처리기가 실행되는 대상

이벤트 캡쳐링

(웹 브라우저에서는 기본적으로 '이벤트 버블링' 전파 방식을 사용..)
이벤트 캡쳐링: 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식
버블링 → 아래서 위(자식 요소에서 부모 요소) 전파
캡쳐링 → 위에서 아래(부모 요소에서 자식 요소) 전파

// .html
// 생략
<body>
  BODY
  <div>
    DIV
    <section>
      SECTION
      <p>P</p>
    </section>
  </div>

  <script src="js/capturing.js"></script>
</body>
// 생략
const elements = document.querySelectorAll('*');  // 모든 요소를 가져와 elements에 저장

 // 모든 요소 순회하면서 click 이벤트 발생했을 때 
 // event.target과 event.currentTarget의 태그명 표시
for (let element of elements) {
  element.addEventListener("click", e => 
    console.log(`event.target : ${e.target.tagName}, event.currentTarget : ${e.currentTarget.tagName}`),
  true);
}

// 아래와 같이 사용할 수도 있지만 for ... of 문 사용을 추천
// for (let i = 0 ; i < elements.length ; i++) { 
//   elements[i].addEventListener("click", function(e) {   
//     console.log(e.target.tagName);                      
//   }, true);
// }
// .js

이벤트가 발생한 영역은 P 영역이지만, currentTarget이 최상위 요소인 HTML 부터 시작함

교재: Do it! 모던 자바스크립트 프로그래밍의 정석

저작자표시 비영리 변경금지

'Study > JavaScript' 카테고리의 다른 글

[모던자바스크립트]05 DOM의 기초 (0)	2023.03.23
[모던자바스크립트]04 프로그래밍 한발 더 나가기, 함수와 스코프 (0)	2023.03.22
[모던자바스크립트]03 연산자와 제어문 (0)	2023.03.21
[모던자바스크립트]02 프로그래밍의 기본, 변수와 자료형 살펴보기 (0)	2023.01.19
[모던자바스크립트]01 자바스크립트 시작하기 (0)	2023.01.19

빵먹는중_ITing_🍞

[모던자바스크립트]06 이벤트와 이벤트 처리기

06-1. 이벤트 알아보기

06-2. 이벤트 처리하기

06-3. event 객체

06-4. 이벤트 전파

'Study > JavaScript' 카테고리의 다른 글

티스토리툴바

[모던자바스크립트]06 이벤트와 이벤트 처리기

06-1. 이벤트 알아보기

06-2. 이벤트 처리하기

06-3. event 객체

06-4. 이벤트 전파

'Study > JavaScript' 카테고리의 다른 글

'Study/JavaScript' Related Articles

티스토리툴바