[JavaScript] 이벤트
이벤트
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행
- 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 함
이벤트 타입(Event Type)
https://developer.mozilla.org/ko/docs/Web/Events
- 발생한 이벤트의 종류
- 이벤트명이라고도 부름
- 가장 많이 사용되는 키보드, 마우스, HTML DOM, Window 객체등을 처리하는 이벤트가 많이 제공
onclick, onkeypress, onLoad, ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ㅊ</title>
</head>
<body>
<script>
window.onload = function() {
const text = document.getElementById('text');
text.innerHTML = "<b style='color:deeppink;'>HTML 문서가 로드되었습니다.</b>"
}
function changeText(el) {
el.innerHTML = "<b style='color:deepskyblue;'>문자열이 변경되었습니다.</b>"
}
</script>
<h2>이벤트 타입</h2>
<p id="text"></p>
<p onclick="changeText(this)">문자열을 클릭하세요</p>
</body>
</html>
이벤트 타겟(Event Target)
- 이벤트가 일어날 객체
<input type="button" onclick="sendit()" value="가입">
------ ------ --------
이벤트타겟 이벤트명 이벤트리스너
이벤트 리스너(Event Lestener)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 이벤트 핸들러라고도 함
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹브라우저는 그 요소에 등록된 이벤트 리스너를 실행
<input type="button" id="testbtn" value="테스트">
const btn = document.getElementById('testbtn');
btn.addEventListener('click', clickBtn); //=onclick 함수명
--- ------ --------
이벤트타겟 이벤트명 이벤트리스너
function clickBtn(){ //이벤트리스너
....
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 리스너</title>
</head>
<script>
'use strict';
window.onload = function() {
const btn = document.getElementById('eventBtn');
btn.addEventListener('click', clickBtn);
btn.addEventListener('mouseover', mousOverBtn);
btn.addEventListener('mouseout', mouseOutBtn);
}
function clickBtn() {
document.getElementById('text').innerHTML = '<b>버튼을 클릭했어요</b>'
}
function mousOverBtn() {
document.getElementById('text').innerHTML = '<b>버튼 위에 마우스가 나갔어요</b>'
}
function mouseOutBtn() {
document.getElementById('text').innerHTML = '<b>버튼 밖으로 마우스가 나갔어요</b>'
}
function delEvent() {
const btn = document.getElementById('eventBtn');
btn.removeEventListener('click', clickBtn);
btn.removeEventListener('mouseover', mousOverBtn);
btn.removeEventListener('mouseout', mouseOutBtn);
document.getElementById('text').innerHTML = '<b>이벤트가 삭제되었어요.</b>'
}
</script>
<body>
<h2>이벤트 리스너</h2>
<p><button id="eventBtn">이벤트 버튼</button></p>
<p><button id="delBtn" onclick="delEvent()">이벤트 삭제</button></p>
<p id="text"></p>
</body>
</html>
이벤트 객체(Event Object)
- 특정 타입의 이벤트와 관련이 있는 객체
- 해당 타입의 이벤트에 대한 상세 정보를 저장
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와, 이벤트 대상을 나타내는 target 프로퍼티를 가짐
- 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달
<input type="button" onclick="sendit()" value="확인">
function sendit(e) { e: 이벤트 객체
console.log(e.target); // 이벤트 타겟(객체);
console.log(e.type); // 이벤트 타입
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체 - 1</title>
</head>
<body>
<h2>이벤트 객체 - 1</h2>
<input type="button" id="btn" value="확인">
<script>
'use strict';
function clickBtn(e) {
console.log(e.target);
console.log(e.target.id);
console.log(e.target.value);
console.log(e.type);
}
const btn = document.getElementById('btn');
btn.addEventListener('click', clickBtn);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트객체 - 2</title>
</head>
<body>
<h2>이벤트객체 - 2</h2>
<input type="button" id="btn1" value="버튼1">
<input type="button" id="btn2" value="버튼2">
<input type="button" id="btn3" value="버튼3">
<script>
'use strict';
function clickBtn(e) {
switch(e.target.id) {
case 'btn1':
console.log('버튼 1이 눌렸어요');
break;
case 'btn2':
console.log('버튼 2가 눌렸어요');
break;
// case 'btn3':
// console.log('버튼 3이 눌렸어요');
// break;
}
}
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
btn1.addEventListener('click', clickBtn);
btn2.addEventListener('click', clickBtn);
// btn3.addEventListener('click', clickBtn);
btn3.addEventListener('click', (e) => {
console.log(`e.target.id : ${e.target.id}`);
console.log('버튼 3이 눌렸어요');
});
</script>
</body>
</html>
이벤트 전파(Event Propagation)
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남
- 이벤트 전파방식은 버블링, 캡처링 방식으로 나눠짐
버블링 : 자식 -> 부모 전파(기본)
캡처링 : 부모 -> 자식 전파
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 전파</title>
</head>
<style>
#divBox {width: 100%; height: 380px; border: 3px solid red;}
#pBox {width: 70%; height: 150px; border: 1px solid blue;}
#spanBox {border: 3px solid gold;}
</style>
<body>
<h2>이벤트 전파</h2>
<div id="divBox">
<p id="pBox">박스 안의 여러 곳을 <span id="spanBox">클릭</span>하세요</p>
</div>
<p id="text"></p>
<script>
'use strict';
function clickDiv(e) {
document.getElementById('text').innerHTML += "<span style='color: red;'>div 요소를 클릭했어요</span><br>";
}
function clickP(e) {
document.getElementById('text').innerHTML += "<span style='color: blue;'>p 요소를 클릭했어요</span><br>";
}
function clickSpan(e) {
e.stopPropagation(); // 이벤트 전파를 막음
document.getElementById('text').innerHTML += "<span style='color: green;'>span 요소를 클릭했어요</span><br>";
}
// 버블링 전파방식
document.getElementById('divBox').addEventListener('click', clickDiv);
document.getElementById('pBox').addEventListener('click', clickP);
document.getElementById('spanBox').addEventListener('click', clickSpan);
// // 캡처링 전파방식
// document.getElementById('divBox').addEventListener('click', clickDiv, true);
// document.getElementById('pBox').addEventListener('click', clickP, true);
// document.getElementById('spanBox').addEventListener('c lick', clickSpan, true);
</script>
</body>
</html>