JavaScript

#3.3 Events

김예나 2023. 2. 3. 12:08
  • document는 html이 app.js를 load하기 때문에 존재함
  • 모두 자바스트립트의 object->object의 속성 변경가능함, on으로 시작하는 것은 다 이벤트

console.dir하면 나옴

  • event -> 클릭하는거, 입력끝내기, 엔터누르기 등등..
const title = document.querySelector(".hello h1");

console.dir(title); //element의 내부를 보는 법


title.innerText="Hello"; //h1의 text변경

function handleTitleClick(){
    console.log("클릭됨");
    title.style.color="blue"; //h1의 style을 자바스크립트에서 변경
}

title.addEventListener("click",handleTitleClick); //클릭한 경우 함수가 실행됨,
				//함수인자에 괄호넣으면 안됨handleTitleClick() ㄴㄴ
  • htrml요소를 가져와서 addEventListener로 click이벤트 추가, 클릭한 경우에 함수 실행