1. Searching For Elements

2. Click Events Part One(addEventListener())

3. Cilick Events Part Two(addEventListener())

4. More Events Window-1(document.body)

5. More Events Window-2(alert**)**

6. className

7. classList()

1. Searching For Elements

1-1) HTML

1-2) Javascript

• querySelector : element를 CSS 방식으로 검색할 수 있음.

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

console.log(title);

• 동작 원리

  • hello라는 class 내부에 있는 h1을 가지고 올 수 있다는 것을 의미함.
  • CSS slector를 사용해서 class hello를 찾고,
  • 그 안에 있는 h1을 가져와달라고 하는 거임.

• Console

  

2. Click Events Part One

2-1) addEventListener()

• 말 그대로 event를 listen하는 거임.

// title element를 찾아오기
const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	console.log("title was clicked");
	h1.style.color = "blue";  // 클릭 후 파란색으로 변함.
}

// function을 실행시키고 싶으면
h1.addEventListener("click", handleTitleClick);

// 중요 포인트
handlerTitleClick(); // 실행할 function을 넣지 않아도 됨.

• 동작 원리

  • 유저가 title을 “click”에서 click event를 listen한다는 의미임.
  • click event가 발생하면 handleTitleClick이라는 function 동작하길 원함.
  • 말 그대로 누군가가 title을 click하는 것을 listen할 거야임.

• Console

  

  

2-2) 동작 원리

• h1.addEventListener("click ", hadleTitleClick);
  • 1. 여기 title이란 HTML Element가 하나 있다고 가정하면
  • 2. addEventListner를 호출하고, listen하고 싶은 event 이름을 알려줄 거야.
  • 3. event가 발생하면 호출할 function을 전달해주면 됨.
  • 4. *** => Javascript에 function만을 넘겨주면 됨.
  • 5. 유저가 click할 경우에 Javascript가 실행버튼을 대신 눌러주길 바라는 거야.

3. Click Events Part Two

3-1) h1 html element mdn으로 검색하기

console.dir(title); // 세부사항을 볼 수 있음.

• Console

  • on은 onclick으로 보면 됨.

  

3-2) mouseEnter function과 mouseLeave 만들기

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

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

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

h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

• Console

  

  

4. More Events Window(document.body)

4-1) HTML

• document.body

  

  • body는 특별해서 이렇게 body를 호출할 수 있음.

• Q : document.div는 가져올 수 없을까?

  • 가져올 수 없음.
  • document의 body, head, title 이런 것들이 중요하기 때문에 이렇게 존재하는 거임.
  • 나머지 elements들은 querySelector나 getElementById 등으로 찾아와야 함.

4-2) Javascript

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

function handleMouseClick() {
	h1.style.color = "blue";
}

function handleWindowResize() {
	document.body.style.backgroundcolor = "tomato";
}

h1.addEventListener("click", handleMouseClick);
window.addEventListener("resize", handelWindowResize);

• Console

  

• HTML

  

5. More Events Window-2(alert)

5-1) Javascirpt

• Offline : WIFI

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

window.addEventListener("offline", handleWindowOffline);

• Console

  

5-2) Javacript

• Online : WIFI

function handleWinodwOnline() {
	alert("ALL GOOD");
}

window.addEventListener("online", handleWindowOnline);

• Console

  

6. className

• 이전 거는 상관없이 모든 걸 교체해버림

6-1) 기본

function handleTitleClick() {
	if (h1.style.color === "blue) {
		h1.style.color = "tomato";
	} else {
		h1.style.color = "blue";
	}
}

h1.addEventListener("click", handleTitleClick);

6-2) 간결하게 바꾸기

• element의 style을 javascript에서 변경하는 걸 별로 좋아하지 않음.

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

function handleTitleClick() {
	const currentColor = h1.style.color;
	let newColor;
	if (currentColor === "bule") { 
		newColor = "tomato";
	} else {
		newColor = "blue";
	}
	h1.style.color = newColor;
}

h1.addListener("click", handleTitleClick);

6-3) 더 간결하게 바꾸기

7. classList()