addEventListner :
HTML 요소에 이벤트를 감지해서 어떤 동작을 실행하도록 설정할 때 사용한다.
element.addEventListener(event, function, useCapture);- element: 이벤트를 감지할 HTML 요소이다. (예: 버튼, 문서 전체 등)
- event: 감지할 이벤트 종류이다. (예: "click", "keydown", "mouseover" 등)
- function: 이벤트가 발생했을 때 실행할 함수이다.
- useCapture (선택): true 또는 false – 이벤트 전파 설정 단계이다. (일반적으로는 생략하거나 false)
event 객체 :
이벤트가 발생했을 때, 브라우저가 자동으로 함수에 매개변수 형태로 전달해주는 객체(parameter)이다. 이 객체에는 이벤트에 대한 모든 정보가 담겨 있다.
function handleClick(event) {
console.log(event);
}
element.addEventListner("click", handleClick);- event 객체는 첫 번째 매개변수로 전달된다. (고정)
- event 매개변수 이름을 자유롭게 바꿔서 사용해도 가능하다.
Click 이벤트 :
사용자가 요소를 마우스로 클릭했을 때 발생하는 이벤트이다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<button id="click">버튼</button>
</body>
<script>
const btn = document.getElementById("click");
function handleClick(event) {
console.log("어디서 클릭됐는지:", event.target);
}
btn.addEventListener("click", handleClick);
</script>
</html>
더 많은 이벤트 확인 :
https://developer.mozilla.org/ko/docs/Web/API/Element/click_event
'HTML, CSS, Javascript' 카테고리의 다른 글
| [Javascript] 요소를 붙이는 다양한 방법 (0) | 2025.04.13 |
|---|---|
| [Javascript] HTML 문서에 새 요소 붙이는 방법 (0) | 2025.04.12 |
| [Javscript] 태그 요소 가져오는 방법 (0) | 2025.04.11 |
| JavaScript : arrow function (0) | 2025.01.21 |
| HTML, CSS : 나만의 Playlist 디자인하기 (0) | 2025.01.13 |
