본문 바로가기

자바스크립트 기기기초

#3.3 Events

  • 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이벤트 추가, 클릭한 경우에 함수 실행

'자바스크립트 기기기초' 카테고리의 다른 글

#3.6 CSS in Javascript  (0) 2023.02.04
#3.5 More Events  (0) 2023.02.03
#3.4 Events part Two  (0) 2023.02.03
#3.2 Searching For Elements  (0) 2023.01.24
#3.0 The Document Object  (0) 2023.01.20