웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들면 텍스트를 클릭하거나 마우스를 위로 가져가는 것, 입력을 끝내는 것, enter를 누르는 것 등이 모두 이벤트(event)에 해당한다.
- MDN(Mozilla Developer Network)에 검색하기
- console.dir()함수 활용하기
1. console.dir() 함수로 이벤트를 감지할 요소를 출력한다.
2. ᐅ를 클릭하여 on이 붙은 속성(property)를 찾는다.
자바스크립트는 event를 감지(listen)하고 적절한 동작을 실행시킬 수 있다. 이처럼 event를 처리하기 위해서 아래의 두가지 방법을 이용할 수 있다.
- addEventListener() 함수 활용하기
- oneventname 속성 활용하기
예를 들어 Grab me 1!라는 제목을 클릭하면 색깔이 바뀌는 기능을 구현하고자 하면 addEventListener() 함수를 다음과 같이 활용할 수 있다.
우선 HTML파일의 태그 내부를 다음과 같이 작성하였다.
<body>
<div class="hello">
<h1>Grab me 1!</h1>
</div>
<script src="script.js"></script>
</body>
자바스크립트 파일에는 이벤트가 발생했을 때 이를 처리하는 함수(이벤트 처리기) handleTitleClick() 를 만들고 addEventLister() 함수에 click 이벤트와 앞서 작성한 이벤트 처리기를 인수로 넘겨주면
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.style.color = "blue"; // 제목을 클릭하면 제목색깔 변경
}
function handleMouseEnter() {
h1.innerText = "Mouse is here!"; //마우스를 제목에 가져가면 제목 변경
}
function handleMouseLeave() {
h1.innerText = "Mouse is gone!"; // 마우스를 제목에서 떼면 제목 변경
}
function handleWindowResize() {
document.body.style.backgroundColor = "red" // 브라우저 창 크기를 변경하면 배경화면 색 변경
}
function handleWindowCopy() {
alert("copier!"); // 유저가 복사(ctrl + c)를 하면 알림창 띄우기
}
function handleWindowOffline() {
alert("SOS No WIFI"); // 와이파이가 해제되면 알림창 띄우기
}
function handleWindowOnline() {
alert("ALL GOOOD"); // 와이파이가 연결되면 알림창 띄우기
}
title.onclick = handleTitleClick; // oneventname 속성 활용하기
title.addEventListener("mouseenter", handleMouseEnter); // addEventListener() 함수 활용하기
title.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handle WindowOnline):