자바스크립트에서의 HTML/ 이벤트 리스너

자바스크립트에서의 HTML

 

document.getElementById(“title”)
->  html에 있는 id를 불러올 수 있다.

js에서는 html이 표현하는 object를 보여준다

title.innerText = “got you”
처럼 js에서 HTML의 정보를 바꿀 수 있다->  id를 추가했기에 가능.

모든 것들을 html에서 항목들을 가지고와서 js에서 변경한다

 

console.dir(“title”);
js에서는 html이 표현하는 object를 보여준다

정리

브라우저에서 제공하는 객체(object) 중 document라는 객체는
JS에서 HTML파일을 불러올 수 있도록 도와준다.
document라는 객체 안에 getElementById 라는 함수가 있는데 이 함수는 해당 HTML의 고유 ID를 추적하여 해당 HTML파일을 찾은뒤에 JS가 해당 ID를 가진 HTML 파일을 보완 수정할 수 있도록 해준다.

 

---

자바스크립트를 통해 HTML의 elements을 가져오기

 

- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
- getElementsByTagName() : name을 할당할 수 있음(array를 반환)
- querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌

⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)
- 첫번째 element만 가져옴
- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
⇒ 세개의 h1이 들어있는 array를 가져다 줌

- querySelector("#hello"); 와 getElementById("hello"); 는 같은 일을 하는 것임
하지만 후자는 하위요소를 가져오는 것을 못하므로 전자만 쓸거다

 

---

event - JavaScript에서 HTML과 상호작용하는 과정

const title=document.querySelector(".hello:first-child h1")

//class hello를 가진 div내부의 first자식인 h1찾기

//=>HTML element를 자바스크립트로 가져오기

console.log(title)

title.style.color="blue"

//첫번째 자식 h1의 스타일을 자바스크립트에서 변경하기

function handleTitleClick(){

title.style.color="blue"

}

title.addEventListener("click", handleTitleClick)

//title에 eventListener추가+ function을 두번쨰 인수(argument)에 전달

 

//자바스크립트에 function을 전달해 유저가 title을 클릭하면 자바스크립트가 나 대신 handleTitleClick() 을 실행시켜 실행버튼을 누르게 함

1. JavaScript로 HTML 요소에 접근하기
   JavaScript 파일을 로드하면, 브라우저는 document 객체를 통해 HTML 문서의 내용을 읽을 수 있게 됩니다. 이 document 객체는 HTML의 구조를 JavaScript로 조작하거나 상호작용할 수 있게 해주는 핵심입니다.
   • document.querySelector()는 CSS 선택자(CSS selector)를 사용하여 특정 HTML 요소를 선택합니다. 여기서 div.hello:first-child h1은 class="hello"인 div 요소의 첫 번째 자식인 h1 태그를 선택하는 선택자입니다.
      
2. 콘솔에서 요소 확인하기
   요소의 내부를 보고 싶다면 console.dir()을 사용합니다. 이렇게 하면 요소를 객체(object)로 보여주며, JavaScript가 HTML 요소를 어떻게 표현하는지 확인할 수 있습니다. 이 객체에는 다양한 속성(properties)이 있으며, 그 중에서 on으로 시작하는 것은 이벤트입니다.
3. 이벤트(Event)란?
   이벤트는 웹 페이지에서 발생하는 특정 행위나 동작을 말합니다. 클릭, 키 입력, 스크롤 등 다양한 사용자 동작이 모두 이벤트로 간주됩니다. JavaScript는 이러한 이벤트를 **리스닝(listen)**할 수 있습니다.
4. 이벤트 리스너(Event Listener)
   JavaScript는 이벤트 리스너를 통해 특정 이벤트를 감지하고 처리할 수 있습니다. 이벤트 리스너는 어떤 이벤트를 감지할지 JavaScript에 알려주는 역할을 합니다.
   • addEventListener()는 특정 요소에 이벤트를 감지하도록 설정하는 메서드입니다.
   • 첫 번째 인수: "click" — 클릭 이벤트를 감지하겠다는 뜻입니다.
   • 두 번째 인수: handleTitleClick — 이벤트가 발생했을 때 실행할 함수입니다. 여기서 중요한 것은 함수 이름 뒤에 괄호 ()를 붙이지 않는 것입니다. 괄호를 붙이지 않음으로써 JavaScript에게 "이 함수는 나중에 이벤트가 발생하면 실행하라"고 지시하는 것입니다.
5. 이벤트 처리 함수
   아래 함수는 사용자가 title 요소를 클릭할 때 색상을 파란색으로 바꾸는 동작을 정의합니다.
   • 이 함수는 이벤트가 발생하면 호출됩니다. 여기서 title.style.color = "blue";는 선택한 title 요소의 글자 색상을 파란색으로 바꾸는 코드입니다.

 

 

함수 호출과 이벤트 리스너의 차이점
만약 handleTitleClick()처럼 함수 이름 뒤에 괄호 ()를 붙이면, JavaScript가 그 즉시 함수를 실행합니다. 그러나 이벤트 리스너에서 우리는 handleTitleClick이라는 함수 자체를 전달해야 하고, 이벤트가 발생했을 때 JavaScript가 대신 이 함수를 실행하도록 해야 합니다. 그래서 괄호를 붙이지 않고 함수의 참조만 전달하는 것입니다.

 

handleTitleClick: 클릭 이벤트가 발생할 때 실행할 함수를 JavaScript에 넘겨줍니다. 유저가 title을 클릭하면 JavaScript가 자동으로 해당 함수를 실행합니다.

handleTitleClick(): 즉시 함수가 실행됩니다. 이벤트를 기다리지 않고 즉시 결과를 보여줍니다.

---

핵심 요약

• JavaScript가 HTML에 접근: 브라우저는 document 객체를 통해 HTML을 JavaScript로 접근하고 조작할 수 있게 해줍니다.
• 이벤트: 클릭이나 키 입력과 같은 사용자 동작을 의미하며, JavaScript는 이를 감지할 수 있습니다.
• 이벤트 리스너: 특정 이벤트를 감지하고, 그 이벤트가 발생했을 때 실행할 함수를 JavaScript에 전달합니다.
• 함수 참조와 실행: 이벤트 리스너에서 함수 이름 뒤에 괄호를 붙이지 않는 이유는 JavaScript가 나중에 이벤트 발생 시 해당 함수를 실행하도록 하기 위함입니다.

 

---

function handleWindowResize(){//윈도우의 사이즈변경 이벤트시 함수-배경색 변경

    document.body.style.backgroundColor="tomato"

}

function handleWindowCopy(){//문자 복사 이벤트 시 함수--알림창 출력

    alert("copied!")

}

title.onclick=handleTitleClick //아래와 같은 기능 수행

//title.addEventListener("click", handleTitleClick)

title.addEventListener("mouseenter", handleMouseEnter)

title.addEventListener("mouseleave", handleMouseLeave)

window.addEventListener("resize",handleWindowResize)

window.addEventListener("copy",handleWindowCopy)

 

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);

*window는 기본제공됨

 

 

---

style에 적합한 도구는 CSS
animation에 적합한 도구는 JS

body {

    background-color: aliceblue;

}

h1 {

    color: cornflowerblue;

    transition: color .5s ease-in-out;

}

.clicked {

    color: tomato;

}

 

const h1 = document.querySelector("div.hello:first-child h1")

 

function handleTitleClick() {// 클릭이벤트 시 색깔변화  함수

    if(h1.className==="clicked"){ //h1의 클래스명이 clicked(빨강)면 비우기=>파란색으로 만들기

        h1.className="";

    }else{

        h1.className="clicked";//빨간색이 아니면 빨강으로 바꾸기

    }

}

h1.addEventListener("click", handleTitleClick);

 

 

• HTML 요소 선택:
  document.querySelector()를 사용해 특정 HTML 요소인 h1 태그를 선택합니다. 선택된 요소는 변수에 저장됩니다.
• 이벤트 리스너 추가:
  JavaScript로 특정 요소에 이벤트 리스너를 추가해, 사용자가 해당 요소를 클릭했을 때 특정 함수가 실행되도록 설정합니다. 이때 클릭 이벤트에 반응하는 함수는 직접 호출되지 않고, 클릭할 때만 실행됩니다.
• 클래스명 조건 확인:
  클릭 시 실행되는 함수는, 현재 요소의 클래스명을 확인하여 스타일을 적용하거나 해제합니다.
  • 클래스명이 **"clicked"**인 경우에는 클래스명을 제거해 기본 스타일로 되돌립니다. (빨->파)
  • 그렇지 않은 경우, 클래스명을 **"clicked"**로 설정해 새로운 스타일을 적용합니다. (파->빨)
• CSS 스타일 변경:
  클래스명에 따라 텍스트 색상을 변경합니다. 기본 상태에서는 파란색, 클래스명이 **"clicked"**일 때는 빨간색이 됩니다.
  또한, 색상 변경이 부드럽게 전환되도록 애니메이션 효과도 추가됩니다.

 

 

=>여기서 JS는 HTML을 변경할거고, CSS는 HTML을 바라보고 style을 변경한다.
근데 조금 문제가 있는 active는 우리가 지어준 이름이다. raw value라고 하는데, 이름을 바꾸다가 에러가 발생할 수도 있다.

=>const로 지정해 해결

 

function handleTitleClick() {

    const clickedClass = "clicked";

    if (h1.className === clickedClass) {

        h1.className = "";

    } else {

        h1.className = clickedClass;

    }

}

이렇게 작성하면 에러가 발생할 수 있는 부분을 축소한다.

 

---

 

classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.
className은 이전calss를 상관하지않고 모든걸 교체해 버린다.

function handleTitleClick() {// 클릭이벤트 시 색깔변화  함수

   const clickedClass="clicked"//raw value사용시 발생가능한 에러 방지

    if (h1.classList.contains(clickedClass)) { //h1의 클래스명이 clicked(빨강)면 비우기=>파란색으로 만들기

        h1.classList.remove(clickedClass);

    } else {

        h1.classList.add(clickedClass);

        //h1의 classList에 classname이 포함되었으면 제거하고 없으면 추가

    }

}

h1.addEventListener("click", handleTitleClick);

classList를 이용하는건
js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻

contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다

 

function handleTitleClick() {// 클릭이벤트 시 색깔변화  함수

   const clickedClass="clicked"//raw value사용시 발생가능한 에러 방지

    h1.classList.toggle(clickedClass)

    //토글은 h1의 classList에 clicked 클래스가 있는지 확인해 있으면 없애고 없으면 추가

   

}

h1.addEventListener("click", handleTitleClick);

toggle은 토큰이 존재하면 토큰제거/ 토큰존재 하지않으면 토큰 추가

 

=>위의 두 코드는 동일한 작업을 한다

ex)
toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가