노마드코더 ( addEventListener, toggle )

addEventListener("click", handleTitleClick);

1. listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색한다.
2. javascript의 element를 원하기때문에 링크에 Web APIs라는 문장이 포함된 페이지를 찾는다

   왜냐면 이건 JS관점의 HTML Heading Element란 의미이기 때문.
너무 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨.

function handleMouseEnter() {
title.innerText = "Mouse is here!"
}
function handleMouseLeave() {
title.innerText = "Mouse is gone!"
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

하지만 대부분의 경우에는 style은 CSS를 통해 변경되어야한다.

---

event를 사용하는 데에 두가지 방법이 있다.

1. title.onclick = handleMouseEnter;
2. title.addEventListener(“mouseenter” , handleMouseEnter);

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

document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);

window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

---

function handleTitleClick(){
const clickedClass = “clicked”;
if(h1.className=== clickedClass) {
h1.className=““;
}else{
h1.className = clickedClass;
}
}

 

javascript를 통해 특정 event 발생 시 CSS 속성을 변경시킨다고 하였을때 JS 자체에서 style 속성을 설정하는 것은 지양한다.

이럴때 위와 같이 className을 수정하는 방식을 이용한다. (수정한 className으로 CSS에서 스타일 설정)

 

문제는 className은 모든걸 교체해버리기 때문에 이전의 HTML문서에 설정된 class들을 지우는 문제가 발생된다.
그래서 classList를 사용해야해야한다. (classList: class를 목록으로 작업할 수 있게끔 허용)

 

classList에는 여러가지 function들이 있다.
1. constains : 우리가 명시한 class가 HTML element의 class에 포함되어 있는지를 반환.
2. remove : 명시한 class name을 제거.
3. add : 명시한 class name을 추가.

function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}

 

이렇게 하면 첫번째 예제에서 다른 class Name을 지워버리는 문제를 해결할 수있다.
그런데 이와 동일한 기능을 구현할 수 있는 더 좋은 function이 존재한다.

 

toggle function은 class name이 존재하는지 확인한다.
class name이 존재하면 toggle은 class name을 제거하고, class name이 존재하지 않으면 toggle은 class name을 추가한다.
function handleTitleClick() {
h1.classList.toggle("clicked");
}
한번만 적기 때문에 const도 필요 없다. toggle은 켜고끄는 스위치버튼과 같다.