49일차[JavaScript] (2)-자바스크립트 addEventListener 사용법

카테고리 없음

49일차[JavaScript] (2)-자바스크립트 addEventListener 사용법

둥구는 지굴다 2023. 1. 2. 19:32

addEventListener 사용법

addEvenListener( )은 document의 특정요소(id, class, tag)등에 event를 등록할 때 사용합니다.

DOM객체.addEventListener(이벤트명,실행할 함수명)

addEventListener의 간단한 예시

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn_test1">빨간색이 나옵니다.</button>
    <button id="btn_test2">파란색이 나옵니다.</button>
    <button id="btn_test3">초록색이 나옵니다.</button>
    <script src="test.js"></script>
  </body>
</html>

간단한 버튼 세 개를 만들었습니다.

화면

해당 버튼들을 클릭하면 색깔이 나오는 이벤트를 js로 넣어보겠습니다.

JavaScript

const btn1 = document.getElementById("btn_test1");
const btn2 = document.getElementById("btn_test2");
const btn3 = document.getElementById("btn_test3");
btn1.addEventListener("click", function () {
  btn1.style.backgroundColor = "red";
});

btn2.addEventListener("click", function () {
  btn2.style.backgroundColor = "blue";
});

btn3.addEventListener("click", function () {
  btn3.style.backgroundColor = "green";
});

해당 버턴들의 id값으로 요소들을 가져온 뒤

변수들 별로 addEventListener를 사용하여 “click”을 했을 때 background-color을 각각의 색깔별로 추가해주는 코드를 작성했습니다.

버튼 클릭했을 때

해당 버튼을 누르면 버튼들의 색깔이 변경되는 것을 확인할 수 있습니다.

이벤트 리스너 삭제하기

이벤트 리스너를 사용하다 필요 없다고 하면 반드시 추가된 이벤트 리스너는 삭제해주어야 한다.

이벤트 리스너를 삭제할 땐 removeEventlistener을 이용한다.

DOM객체.removeEventListener(이벤트명,실행했던 함수명);

마우스 이벤트 종류

이벤트명 실행할 함수명

이벤트명	실행할 함수명
click	마우스 버튼을 클릭하고 버튼에서 손가락들 떼면 발생한다
mouseover	마우스를 HTML요소 위에 올리면 발생한다
mouseout	마우스가 HTML요소 밖으로 벗어날 때 발생한다
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 음직였을 때
contextmenu	마우스 오른쪽 버튼 눌렀을 때 나오는 메뉴가 나오기 전에 이벤트 발생

키보드 이벤트

이벤트명 실행할 함수명

이벤트명	실행할 함수명
keydown	키를 처음 눌렀을 때
key uo	키를 떼었을 때
keypress	키를 누른 상태에서

UI이벤트

이벤트명 실행할 함수명

이벤트명	실행할 함수명
load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드될 때
error	브라우저가 자바스크립트 오류를 만났거나, 요청한 자원이 없는 경우
resize	브라우저 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤할 때

저작자표시