const title = document.querySelector(".hello:first-child h1");
function titleClick() {
title.style.color = 'blue';
}
function titleMouseEnter() {
title.innerHTML = "mouse is here@!"
}
function titleMouseLeave() {
title.innerHTML = "mouse is gone!"
}
title.addEventListener("click", titleClick);
title.addEventListener("mouseenter", titleMouseEnter);
title.addEventListener("mouseleave", titleMouseLeave);
축약해서 쓰는 방법이 있을 것 같아서 찾아봤는데
const title = document.querySelector(".hello:first-child h1");
title.addEventListener("click", () => {
title.style.color = 'blue';
});
title.addEventListener("mouseenter", () => {
title.innerHTML = "mouse is here@!";
});
title.addEventListener("mouseleave", () => {
title.innerHTML = "mouse is gone!";
});
이렇게 줄여쓰면 될것같다
'강의 > 노마드 코더 강의' 카테고리의 다른 글
노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - localStorage 값 불러오기 (0) | 2023.05.26 |
---|---|
노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - addEventListener (0) | 2023.05.26 |
노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - or, and 연산자 (0) | 2023.05.26 |
노마드 코더 - 바닐라 JS로 그림 앱 만들기- 이미지 파일버튼 추가 (0) | 2023.05.26 |
노마드 코더 - 바닐라 JS로 그림 앱 만들기- 그림판 만들기 (0) | 2023.05.26 |