[JS] 바닐라 자바스크립트 학습 - Elements, events

zero_0·2021년 12월 15일
0

FE 학습

목록 보기
10/22
post-thumbnail

<들어가기 앞서>
노마드 코더 영상을 학습하며 정리한 글입니다.


Searching For Elements

_html 값을 js로 불러오는 방법! 3.2강 참조

  • getElementsByClassName() : array를 반환
  • getElementsByTagName() : array를 반환
  • getElementById : 하나의 값
  • querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
    단 하나의 element를 return해줌. 첫번째꺼만 가져온다.
  • 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
    ⇒ 세개의 h1이 들어있는 array를 가져다 줌
  • querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
    하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다

🎈정리 : 배열 을 가져오면 title.innerText 와 같은 방법은 사용할 수 없다. 즉 Id를 가진 태그의 하위 태그를 선택하고 싶을 때 위의 방법으로는 한계가 있다는 말!
이때 사용하는 게 querySelector/querySelectorAll이다.

Events part

_listen하고 싶은 events를 찾는 방법
1.

// element를 console에 출력해줌
console.dir(title);


앞에 on으로 시작하는 것들이 event 임 여기서 on을 떼고 사용하면 된다.
이런느낌으로 ↓

title.addEventListener("mouseenter",handleMouseEvent);
title.addEventListener("click", handleTitleClick);

2.
공식문서에서 확인하기


현재까지 진행한 이벤트들

h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEvent);
h1.addEventListener("mouseleave", handleMouseLeave);

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

window.addEventListener("resize",handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

완성한 코드

h1.addEventListener("click", handleTitleClick);
h1.onclick = handleTitleClick;

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

계속 패턴이 반복된다.

  1. 자바스크립트로 HTML element를 가져오고
  2. 가져온 element에 eventlistner을 추가해주고 함수 만들기
  3. 그리고 event가 발생하면 어떤 함수를 실행시켜준다

그러니 패턴을 익혀서 적용시키자!

/*자바스크립트 이벤트학습 3.4 */
//event를 listen하는 방법을 배운거임.

const h1 = document.querySelector(".hello h1");


function handleTitleClick(){
    h1.style.color = "hotpink";
}
// element를 console에 출력해줌
console.dir(h1);

function handleMouseEvent() {
    h1.innerText = "Mouse is here!";
}

function handleMouseLeave() { 
    h1.innerText = "Mouse is gone";
}

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
    //document는 body,head,title 존재
}

function handleWindowCopy() {
    alert("copier");
}

function handleWindowOffline() {
    alert("SOS no WIFI");
}

function handleWindowOnline() {
    alert("All Good");
}

// title에 click 이벤트가 발생하면 handleTitleClick 함수가 동작되길 원해!
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEvent);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize",handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
//패턴이 똑같다. element를 찾아서 event listener에 추가하고 event가 발생하면 반응을 해줌.
profile
차근차근 채워가는 it일지

0개의 댓글