Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

230810_TIL 본문

📝TIL📝

230810_TIL

과부하가즈아 2023. 8. 11. 15:10

부제. EventTarget.addEventListener()

EventTarget.addEventListener()를 가볍게만 알아뒀다가 노마드 바닐라 JS 챌린지의 과제를 진행하다가 새롭게 해결한 것들

<과제 조건>
마우스가 title위로 올라가면 텍스트가 변경되어야 합니다.
마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
마우스를 우 클릭하면 title이 바뀌어야 합니다.
title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
.css 와 .html 파일은 수정하지 마세요.
모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.
모든 조건이 충족되지 못하면 ❌를 받습니다.

<사용할 수 있는 Event>
mouseenter : 마우스가 위로 올라갔을 때 발생하는 이벤트입니다. 
mouseleave : 마우스가 떠났을 때 발생하는 이벤트입니다.
contextmenu : 사용자가 요소를 마우스 우 클릭해 메뉴를 열 때 발생하는 이벤트입니다.
resize : 브라우저 창의 사이즈가 변할 때 발생하는 이벤트입니다.

우선 기존에 하던대로 함수를 만들고 해당 함수를 이벤트 생성시 실행할 요소랑의 연결까지는 완료! 

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Challenge</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="title">Hello!</h1>
    <script src="app.js"></script>
</body>
</html>

<!-- 
색상 참고
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
-->
// app.js
const title = document.getElementById('title')

// title위로 올라가기
function mouseOn(){
    title.innerText = "The mouse is here😀";
    title.style.color ="#1abc9c";
}
// title에서 벗어나기
function mouseOff(){
    title.innerText = "The mouse is gone😣"
    title.style.color ="#3498db";
}
// 브라우저 창 변화
function sizeChange(){
    title.innerText = "You just resized😵"
    title.style.color ="#9b59b6";
}
// 마우스 우 클릭
function rightClick(){
    title.innerText = "That was a right click➡️"
    title.style.color ="#e74c3c";
}

title.addEventListener("mouseenter", mouseOn)
title.addEventListener("mouseleave", mouseOff)
window.addEventListener("resize", sizeChange)
window.addEventListener("contextmenu", rightClick)

📌문시해알

 

title의 색상은 colors 배열에 있는 색을 사용하기

→ colors의 배열의 인덱스 순서대로 색을 부여한다. 

const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

const title = document.getElementById('title')

// title위로 올라가기
function mouseOn(){
    title.innerText = "The mouse is here😀";
    title.style.color = colors[0];
}
// title에서 벗어나기
function mouseOff(){
    title.innerText = "The mouse is gone😣"
    title.style.color = colors[1];
}
// 브라우저 창 변화
function sizeChange(){
    title.innerText = "You just resized😵"
    title.style.color = colors[2];
}
// 마우스 우 클릭
function rightClick(){
    title.innerText = "That was a right click➡️"
    title.style.color = colors[4];
}

title.addEventListener("mouseenter", mouseOn)
title.addEventListener("mouseleave", mouseOff)
window.addEventListener("resize", sizeChange)
window.addEventListener("contextmenu", rightClick)

조건의 함수 핸들러를 superEventHandler내부에 작성하기

 

객체 안에 함수를 넣을 수 있는 것을 참고하였다. 

→ superEventHandler객체를 생성

const superEventHandler = {

}

 

→ 위에서 만든 함수들을 객체 안에 작성,일반함수, 화살표 함수로 각각 작성해 봄

const superEventHandler = {
  mouseOn: function() {
    title.innerText = "The mouse is here😀";
    title.style.color = colors[0];
  },
  mouseOff: function() {
    title.innerText = "The mouse is gone😣";
    title.style.color = colors[1];
  },
  sizeChange: () => {
    title.innerText = "You just resized😵";
    title.style.color = colors[2];
  },
  rightClick: () => {
    title.innerText = "That was a right click➡️";
    title.style.color = colors[4];
  }
};

 

😣 superEventHandler객체 안에 작성한 함수를 사용해 이벤트 핸들러를 등록 시,  addEventListener메서드를 사용하고 각각에 맞는 eventType과 함수를 작성하는데 객체안의 함수를 어떻게 불러올지 몰랐다. 

DOM객체(eventTarget). addEventListener('이벤트명_eventType', 실행할 함수명_function, 옵션)
title.addEventListener("mouseenter", mouseOn)
title.addEventListener("mouseleave", mouseOff)
window.addEventListener("resize", sizeChange)
window.addEventListener("contextmenu", rightClick)

 

그래서 https://bigtop.tistory.com/42를 참고해서 만든 객체의 프로퍼티 접근으로 메서드를 즉, 함수를 호출했다. 

title.addEventListener("mouseenter", superEventHandler.mouseOn());
title.addEventListener("mouseleave", superEventHandler.mouseOff());
window.addEventListener("resize", superEventHandler.sizeChange());
window.addEventListener("contextmenu", superEventHandler.rightClick());

이렇게 작성했는데 올바르게 작동을 하지 않았다. 함수를 호출하고자 ()를 붙였는데 붙이면 안됬던 것이다.

 

⭐
이벤트 리스너에 함수를 등록할 때는 함수를 호출하는 것이 아니라 함수를 선언하거나 참조해야 한다. 이벤트 리스너가 해당 이벤트가 발생했을 때 호출될 함수를 기대하고 있기 때문이다. 

올바른 방식은 이벤트 리스너에 함수 이름만 전달하는 것이다. 함수 이름을 전달하면 해당 이벤트가 발생할 때 함수가 호출된다. 함수 이름 뒤에 괄호를 붙이지 않아야 하며, 괄호를 붙이면 함수가 즉시 호출되므로 주의해야 한다. 

따라서 이벤트 리스너 등록 부분에서는 다음과 같이 함수 이름만 사용해야 한다:

 

title.addEventListener("mouseenter", superEventHandler.mouseOn);
title.addEventListener("mouseleave", superEventHandler.mouseOff);
window.addEventListener("resize", superEventHandler.sizeChange);
window.addEventListener("contextmenu", superEventHandler.rightClick);

함수 뒤에 괄호를 제거해주었더니 잘 작동되었다. 

 

 

😀우물 안 개구리처럼 계속 강의 듣고 정리만 해서 아직까지도 많이 실전(?)이 부족하다고 느낀다ㅠ,, 이걸 좀 타파해야 한다고 매 순간 느끼는데 참 고집은 못 버린다고,, 이 간단한 문제를 해결하니 다시금 깨닫는다,,객체에서 프로터피 접근하는 법, 함수의 호출과 선언의 차이, 이벤트 등록시에는 이벤트를 선언만 해주는 것 다시 깨닫고 간다!

'📝TIL📝' 카테고리의 다른 글

230913_TIL  (0) 2023.09.15
230911_TIL  (0) 2023.09.11
230906_TIL  (3) 2023.09.06
230904_TIL  (2) 2023.09.04
230811_TIL  (0) 2023.08.11
'📝TIL📝' Related Articles more
Comments