DOM Event
Event Listener
마우스를 이용해 버튼을 클릭하는 것과 같은 '이벤트'
이벤트 리스너: 이벤트가 발생했을 때 어떠한 액션을 위해 호출되는 함수
addEventListenr()
호출하기 위해서는 이벤트 리스너를 해당객체/요소에 등록해줘야 한다.
1) 자바스크립트 코드에서 프로퍼티로 등록
window.onload = function () {
// 문서가 load 될 때 이 함수 실행
let text = document.getElementById("text");
// 아이디가 "text"인 요소를 return
text.innerHTML = "HTML 문서 loaded";
}2) HTML 태그에 속성으로 등록
<button onclick="alert('버튼이 클릭됐습니다.')">버튼입니다.</button>3) addEventListener 메소드 사용
element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);
const aElement = document.querySelector('a');
aElement.addEventListener('click', () => {
alert('a element clicked');
});Event 객체
이벤트가 발생할 때 '이벤트 객체'를 가져올 수 있다.
const buttonElement = document.querySelector('.btn');
buttonElement.addEventListener('click', handleClick);
function handleClick(event) {
let val;
val = event;
// Event target element
val = event.target;
val = event.target.id;
val = event.target.className;
val = event.target.classList;
// Event type
val = event.type;
// 윈도우로부터의 거리 좌표
val = event.clientY;
val = event.clientX;
// 요소로부터의 거리 좌표
val = event.offsetY;
val = event.offsetX;
console.log(val);
}Event 종료
1) UI 이벤트
load: 문서나 객체가 로드 완료되었을 때 발생
change: 객체의 내용이 변동/focus를 잃었을 때 발생
resize: 객체의 크기가 바뀌었을 때 발생
scroll: 스크롤바를 조작할 때 발생
error: 에러가 발생되었을 때 발생
2) 키보드 이벤트
keydown: 키를 눌렀을 때 발생 (누르고 있으면 계속 실행)
keyup: 키를 눌렀다가 뗐을 때 발생
keypress: 사용자가 눌렀던 키의 문자가 입력되었을 때 발생 (한 번만 실행 = 사용자가 누른 키의 문자가 입력되었을 때 발생)
3) 마우스 이벤트
click: 객체를 클릭했을 때 발생
dbclick: 객체를 더블클릭했을 때 발생
mousedown: 마우스를 클릭했을 때 발생
mouseout: 마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover: 마우스가 특정 객체 위로 올려졌을 때 발생
mousemove: 마우스가 움직였을 때 발생
mouseup: 마우스에서 손을 뗐을 때 발생
mousedown vw click
클릭 ➡️ mousedown ➡️ 마우스 놓음 ➡️ click
4) 포커스 이벤트
focus: 객체에 포커스 되었을 때 발생
blur: 객체가 포커스를 잃었을 때 발생
5) 폼 이벤트
input: input, textarea 요소 값이 변경되었을 때 발생
change: 선택상자, 체크박스, 라디오 버튼 등의 상태가 변경되었을 때 발생
select: 텍스트를 선택했을 때 발생
reset: 리셋 버튼을 눌렀을 때 발생
submit: 사용자가 버튼키 등을 활용하여 폼을 전송할 때 발생
cut/copy/paste: 사용자가 폼필드의 콘텐츠를 잘라내기/복사/붙여넣기 할 때 발생
Event Bubbling
- 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 (Bubble up)
- p ➡️ div ➡️ form
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
const form = document.querySelector('form');
const div = document.querySelector('div');
const p = document.querySelector('p');
form.onclick = function (event) {
event.target.style.backgroundColor = 'yellow';
// chrome needs some time to paint yellow
setTimeout(() => {
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = ''
}, 0);
};
</script>- event.target: 실제 이벤트가 시작된 '타킷' 요소 (P)
- this (event.currrentTarget): 핸들러가 할당된 요소 (FORM)
Event Capturing
- 이벤트가 제일 상단에서 아래로 내려오는 것
이벤트의 세 단계 흐름
1) 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 (위에서 아래로)
2) 타킷 단계: 이벤트가 실제 타킷 요소에 전달되는 단계 (타킷에 이벤트 전달)
3) 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 (아래에서 위로 다시 올라옴)
addEventLister의 capture옵션을 true로 설정하여 캡쳐링의 흐름을 확인할 수 있다.
html ➡️ body ➡️ FORM
<script>
for (let elem of document.querySelectorAll("*")) {
elem.addEventListener(
"click",
(e) => alert(`캡쳐링: ${elem.tagName}`),
true
);
elem.addEventListener("click", (e) => alert(`버블링: ${elem.tagName}`));
}
</script>Event Delegation: 이벤트 위임
하위 요소의 이벤트를 상위에서 위임하는 것
= 하위 요소의 이벤트를 상위에서 제어하는 것
<body>
<div id="buttons">
<button class="buttonClass">Click me</button>
<button class="buttonClass">Click me</button>
</div>
<script>
// const buttons = document.getElementsByClassName("buttonClass");
// for (const button of buttons) {
// button.addEventListener("click", () => alert('clicked'));
// }
const buttons = document.getElementById("buttons");
buttons.addEventListener("click", () => alert('clicked'));
let buttonList = document.querySelector('#buttons');
let button = document.createElement('button');
button.setAttribute('class', 'buttonClass');
button.innerText = 'Click me';
buttonList.appendChild(button);
</script>
</body>