이벤트(Event)
- 웹페이지에서 유저의 행위(키입력, 포커스 이동 등)에 따라 특정 처리를 실행 되로록 하는 처리
- 이벤트 등록 방법은 Inline, Property Listener, addEventListener 3가지 방법이 존재
Inline
- 이벤트 대상인 요소의 속성으로 이벤트를 지정하는 방법
- 동일한 이벤트를 여러 번 사용 불가
- HTML 문서에 JavaScript가 혼재되므로 관리상의 문제가 발생
- 매우 간단한 처리에서만 간혹 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_event</title>
</head>
<body>
<!-- 인라인 이벤트 -->
<button onclick="alert('테스트')">버튼</button>
</body>
</html>
function test() {
alert('테스트용입니다.');
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./14.js" defer></script>
<title>14_event</title>
</head>
<body>
<button onclick="test()">버튼</button>
</body>
</html>
Property Listener
- 이벤트 대상인 객체의 프로퍼티로 이벤트를 지정하는 방법
- 동일한 이벤트를 여러 번 사용 불가
- HTML 문서에 JavaScript를 분리할 수 있어 관리가 쉬움
- 잘 사용하지 않으며 addEventListener을 더 추천
const btn1 = document.querySelector('#btn1');
btn1.onclick = () => {
alert('테스트중입니다.');
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./14.js" defer></script>
<title>14_event</title>
</head>
<body>
<button id="btn1">버튼1</button>
</body>
</html>
addEventListener
- DOM요소에 이벤트 리스너를 추가하는 가장 현대적인 방법
- 이벤트를 등록할 때 실질적으로 쓰이는 방법