<들어가기 앞서>
노마드 코더 영상을 학습하며 정리한 글입니다.
_html 값을 js로 불러오는 방법! 3.2강 참조
🎈정리 : 배열 을 가져오면 title.innerText
와 같은 방법은 사용할 수 없다. 즉 Id를 가진 태그의 하위 태그를 선택하고 싶을 때 위의 방법으로는 한계가 있다는 말!
이때 사용하는 게 querySelector/querySelectorAll이다.
_listen하고 싶은 events를 찾는 방법
1.
// element를 console에 출력해줌
console.dir(title);
앞에 on으로 시작하는 것들이 event 임 여기서 on을 떼고 사용하면 된다.
이런느낌으로 ↓
title.addEventListener("mouseenter",handleMouseEvent);
title.addEventListener("click", handleTitleClick);
2.
공식문서에서 확인하기
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEvent);
h1.addEventListener("mouseleave", handleMouseLeave);
// h1.onclick = handleTitleClick;
//위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
//removeEventListener을 통해서 event listener을 제거할수있기 때문이다.
window.addEventListener("resize",handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
h1.addEventListener("click", handleTitleClick);
h1.onclick = handleTitleClick;
위에 두 코드는 동일하나 addEventListener
를 선호하는 이유는
removeEventListener
을 통해서 event listener
을 제거할수있기 때문이다.
계속 패턴이 반복된다.
- 자바스크립트로 HTML element를 가져오고
- 가져온 element에 eventlistner을 추가해주고 함수 만들기
- 그리고 event가 발생하면 어떤 함수를 실행시켜준다
그러니 패턴을 익혀서 적용시키자!
/*자바스크립트 이벤트학습 3.4 */
//event를 listen하는 방법을 배운거임.
const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
h1.style.color = "hotpink";
}
// element를 console에 출력해줌
console.dir(h1);
function handleMouseEvent() {
h1.innerText = "Mouse is here!";
}
function handleMouseLeave() {
h1.innerText = "Mouse is gone";
}
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
//document는 body,head,title 존재
}
function handleWindowCopy() {
alert("copier");
}
function handleWindowOffline() {
alert("SOS no WIFI");
}
function handleWindowOnline() {
alert("All Good");
}
// title에 click 이벤트가 발생하면 handleTitleClick 함수가 동작되길 원해!
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEvent);
h1.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("resize",handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
//패턴이 똑같다. element를 찾아서 event listener에 추가하고 event가 발생하면 반응을 해줌.