이벤트(events)

김대겸·2022년 9월 25일
0

이벤트란

웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들면 텍스트를 클릭하거나 마우스를 위로 가져가는 것, 입력을 끝내는 것, 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):

0개의 댓글