[TIL_11] html에서 element불러오기 그리고 eventListener

티나·2022년 10월 13일
0

javascript는 html에 접근하고 읽을 수 있고 변경 할 수도 있다.

getElementById/className

  • 많은 element를 한번에 가져와야 할 때 사용한다.

querySelector

  • element를 css방식으로 검색 할 수 있다.
    →id의 경우 ' # ', classname의 경우 ' . ' 필요하다.
  • 제일 첫번째의 element 하나만 반환한다.

querySelectorAll

  • 모든 element를 가져올 수 있다.
const title=document.querySelector("#hello");
const title=document.getElementById("hello");

위 두코드는 같은 일을 하지만 getElementById의 경우 id하위의 것들을 가져올 수 없다.

event

  • 사용자가 click을 하는 것, h1위로 마우스가 올라가는것/내려가는것, 입력을 끝내거나 이름을 적거나 enter를 누르거나 와이파이에 접속되거나 끊기는 등의 것들.
  • javascript는 이러한 이벤트들을 모두 감지(listen)한다.

브라우저가 event를 감지하는 방법
1. html에서 element를 가져와서
2. addEventListener(); 함수를 실행시킨다.
3. 괄호에 어떤 이벤트를 감지하고 싶은지 명시한다.
4. 해당 이벤트가 감지되었을 때 실행할 함수를 전달한다.

여기까지 하면 아래와 같은 코드를 완성할 수 있다.

const title=document.querySelector(".hello h1");  --- 1

function handleTitleClick(){
       console.log("title was clicked");
}   --- 3

title.addEventListener("click", handleTitleClick);  ---2
  1. html에서 element를 찾는다.
  2. 그 element에 eventListener를 호출하고 감지(listen)하고 싶은 이벤트 이름을 적는다.
  3. 이벤트가 발생하면 호출할 function을 전달한다.
profile
프론트엔드 개발자를 목표로 하는 코딩 새싹

0개의 댓글