addEventListener() 메서드는 타겟 요소에서 특정 이벤트가 발생했을 때 어떤 함수가 실행될지를 설정합니다. 타겟 요소는 주로 HTML 요소, Document, 또는 Window입니다.
addEventListener() 메서드의 Syntax:
eventTarget.addEventListener('eventType', listener)
eventType의 대표적인 예시로는 click, load, scroll과 키보드 관련 이벤트, 마우스 관련 이벤트들이 있습니다.
다음은 addEventListener()를 사용한 예시 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>addEventListener()</title>
</head>
<body>
<h1>h1</h1>
<div id="info">Information</div>
<script src="app.js"></script>
</body>
</html>
const title = document.querySelector("h1");
console.log(title);
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
const info = document.querySelector("#info");
function handleWindowResize() {
info.textContent = window.innerWidth;
}
window.addEventListener("resize", handleWindowResize);
addEventListener() 메서드에 listener에 해당하는 함수를 전달할 때는, 그 함수 자체를 전달하는 것이기 때문에 괄호를 붙이지 않아야 합니다.
* addEventListener() 메서드와 반대의 동작을 하는 removeEventListener() 메서드도 존재합니다. addEventListener() 메서드로 추가한 내용을 반대로 삭제하는 역할을 합니다.
728x90
반응형
'Frontend > Javascript' 카테고리의 다른 글
| [JavaScript] <script> 태그의 위치 (0) | 2024.02.12 |
|---|---|
| [JavaScript] toggle() 메서드 (0) | 2024.02.04 |
| [JavaScript] console.dir() 메서드 (0) | 2024.01.31 |
| [JavaScript] getElement* 와 querySelector (0) | 2024.01.31 |
| [JavaScript] every(), some() 메서드 (0) | 2023.09.11 |
