[JS] addEventListener() 메소드

박시은·2023년 3월 7일

JavaScript

목록 보기

43/58

▶ addEventListener() 메소드

addEventListener() 메소드는 이벤트 리스너를 등록하는 메소드이다.
이벤트 리스너는 특정 이벤트가 발생할 때 실행되는 함수를 말한다.

addEventListener() 메소드는 이벤트 대상 요소와 이벤트 유형, 이벤트가 발생했을 때 실행할 함수 세 개의 매개변수를 받는다.

▶ 예시

버튼을 누르면 alert창이 작동하는 코드

// HTML
  <body>
 	 <button id="myButton">클릭하기</button>
     
 	 <!-- HTML 파일에서 <script> 태그를 사용하여 파일을 가져온다-->
    <script src="study.js"></script>
  </body>

// CSS
button:hover {
  background-color: #3e8e41;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// js
const myButton = document.querySelector("#myButton");

myButton.addEventListener("click", function () {
  alert("버튼이 클릭되었습니다.");
});

myButton.addEventListener("mouseover", function () {
  myButton.style.backgroundColor = "#3e8e41";
});

myButton.addEventListener("mouseout", function () {
  myButton.style.backgroundColor = "#4CAF50";
});