event
: 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생(MDN), 예를 들어 유저가 특정 버튼을 클릭하거나, 혹은 특정 키를 입력했을 때. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려줄 수도 있다. 이를 통해 웹페이지와 유저 간의 상호 작용이 가능하다.
이벤트의 종류에는 여러가지가 있다.
1. 마우스 이벤트 :
click : 마우스 클릭할 때 발생.
mouseover : 커서가 요소 안으로 이동될 때 발생.
mouseenter : 커서가 요소 위로 이동될 때 발생.
mouseleave : 커서가 요소 밖으로 이동될 때 발생.
2. 키보드 이벤트 :
keydown : 키가 눌렸을 때 발생.
keyup : 키를 더이상 누르고 있지 않을 때 발생(손가락을 키에서 떼었을 때).
등이 있다.
✦ addEventListener("event", eventHandler)
: 이벤트를 등록하는 가장 권장되는 방식. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다. 이벤트 핸들러 란 특정 요소에서 발생하는 이벤트는 처리하기 위해 작성하는 함수이다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
1)
const h1 = document.querySelector("div.hello:first-child h1");
//이벤트 핸들러(함수)
function handleMouseClick() {
h1.style.color = "blue";
}
h1.addEventListener("click", handleMouseClick); //헤더1을 클릭하면 헤더1의 폰트 색이 바뀐다. 2)
function handleWindowResize() {
document.body.style.backgroundColor = "turquoise";
}
window.addEventListener("resize", handleWindowResize); //윈도우의 사이즈가 바뀌면 배경색 또한 turquoise 색으로 바뀐다. ✧ 타겟에 따라 이벤트의 종류도 달라진다.
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const currentColor = h1.style.color;
let newColor;
if (currentColor === "blue") {
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick)참고
coding & others