<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="alert('버튼 클릭')" class="btn">Click</button>
<script defer>
const btn = document.querySelector(".btn");
const newBtn = document.createElement("button");
window.onload = () => {
newBtn.innerHTML = "newBtn";
document.querySelector("body").appendChild(newBtn);
};
newBtn.addEventListener("click", () => {
alert("new btn Click");
});
</script>
</body>
</html>
event 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="btn" id="button Id">Click</button>
<script defer>
const btn = document.querySelector(".btn");
btn.addEventListener("click", (e) => {
let val;
val = e.target;
val = e.target.id;
val = e.target.className;
val = e.type;
console.log(val);
});
</script>
</body>
</html>
event 종류
1. 마우스 이벤트
click: 요소를 클릭할 때 발생합니다.dblclick: 요소를 더블 클릭할 때 발생합니다.mousedown: 마우스 버튼을 누를 때 발생합니다.mouseup: 마우스 버튼을 뗄 때 발생합니다.mouseover: 마우스 커서를 요소 위로 올릴 때 발생합니다.mouseout: 마우스 커서가 요소에서 벗어날 때 발생합니다.mousemove: 마우스 커서가 요소 위에서 움직일 때 발생합니다.mouseenter: 마우스 커서가 요소에 들어갈 때 발생합니다 (버블링 안 됨).mouseleave: 마우스 커서가 요소에서 나갈 때 발생합니다 (버블링 안 됨).
2. 키보드 이벤트
keydown: 키를 누를 때 발생합니다.keypress: 키를 누르고 있을 때 발생합니다 (이벤트가 폐지될 예정).keyup: 키를 뗄 때 발생합니다.
3. 입력 및 선택 이벤트
input: 입력 필드의 값이 변경될 때 발생합니다.change: 입력 필드의 값이 변경되고 포커스를 잃을 때 발생합니다.focus: 요소가 포커스를 받을 때 발생합니다.blur: 요소가 포커스를 잃을 때 발생합니다.select: 텍스트를 선택할 때 발생합니다.
4. 폼 이벤트
submit: 폼이 제출될 때 발생합니다.reset: 폼이 초기화될 때 발생합니다.
5. 윈도우 이벤트
load: 페이지나 이미지가 모두 로드될 때 발생합니다.unload: 페이지가 언로드될 때 발생합니다.resize: 윈도우 크기가 변경될 때 발생합니다.scroll: 윈도우나 요소가 스크롤될 때 발생합니다.
6. 드래그 이벤트
dragstart: 드래그를 시작할 때 발생합니다.drag: 드래그 중일 때 발생합니다.dragend: 드래그가 끝날 때 발생합니다.dragenter: 드래그된 요소가 유효한 드롭 대상으로 들어갈 때 발생합니다.dragover: 드래그된 요소가 유효한 드롭 대상으로 있을 때 발생합니다.dragleave: 드래그된 요소가 유효한 드롭 대상에서 벗어날 때 발생합니다.drop: 드래그된 요소가 드롭될 때 발생합니다.
7. 터치 이벤트 (모바일)
touchstart: 터치가 시작될 때 발생합니다.touchmove: 터치가 이동할 때 발생합니다.touchend: 터치가 끝날 때 발생합니다.touchcancel: 터치가 시스템에 의해 취소될 때 발생합니다.
8. 기타 이벤트
contextmenu: 컨텍스트 메뉴가 열릴 때 발생합니다.focusin: 요소나 자식 요소가 포커스를 받을 때 발생합니다 (버블링 됨).focusout: 요소나 자식 요소가 포커스를 잃을 때 발생합니다 (버블링 됨).animationstart: CSS 애니메이션이 시작될 때 발생합니다.animationend: CSS 애니메이션이 끝날 때 발생합니다.animationiteration: CSS 애니메이션이 반복될 때 발생합니다.transitionstart: CSS 트랜지션이 시작될 때 발생합니다.transitionend: CSS 트랜지션이 끝날 때 발생합니다.transitionrun: CSS 트랜지션이 실행될 때 발생합니다.transitioncancel: CSS 트랜지션이 취소될 때 발생합니다.
