✔ 자바스크립트의 이벤트에 대해 정리하고, 마지막에 카운터를 만들면서
이벤트에 대해 익혀보자 👍
| 이벤트(Event) |
:) 이벤트는 간단하게 "무언가 일어났다는 신호 또는 어떤 사건을 의미한다.
브라우저에서의 사건이란 사용자가 메뉴를 클릭했을 때, 페이지가 로딩될 때 또는
마우스 조작(오른쪽 버튼 누름)하는 행위 등을 말한다.
여기서는 어떤 이벤트가 있고, 이벤트를 어떻게 처리해야 하는지에 대해 살펴본다.
1. 이벤트 관련 용어
1) 이벤트 이름(event name)
: click, load 등과 같이 이벤트의 이름을 의미
2) 이벤트 속성 (event property)
: 특정 요소에 이벤트를 직접 연결할 때 사용하는 속성을 의미
3) 이벤트 리스너/ 핸들러(event listener/handler)
: 이벤트가 발생할 때, 이벤트 처리를 담당하는 함수를 말한다.
4) 기본 이벤트(default event)
: a 태그의 링크 이벤트와 같이 요소가 가지고 있는 기본적인
이벤트를 말한다.
2. 이벤트 등록 방식
1) 인라인 방식
: 이벤트 리스너를 HTML 파일에 작성한 요소에 직접 연결하는 방법
|
<body>
<button onclick="onClick()">클릭해보자</button>
<script>
function onClick() {
console.log('클릭했다.')
}
</script>
</body>
|
※ 인라인 방식은 일반적으로 잘 사용하지 않고, 권장하지 않는 방식이다.
되도록 HTML과 JavaScript 를 분리해서 사용하자 !!
이와같이 HTML과 JavaScript 를 분리해서 작성하게 되면 나중에 유지보수하기 쉽다.
2) 객체의 이벤트 프로퍼티 사용
: 요소의 이벤트 속성으로 이벤트를 연결하는 방법
→ 인라인 방식과 다르게 HTML과 JavaScript를 분리해서 작성
→ 이벤트에 하나의 이벤트 리스너만 추가할 수 있음
예제1
|
/* HTML */
<body>
<button>클릭해보자</button>
</body>
/* JavaScript */
const btn = document.querySelector('button');
btn.onclick = function() {
console.log('클릭!!');
}
|
예제2
|
/* HTML */
<body>
<button>클릭해보자</button>
</body>
/* JavaScript */
const btn = document.querySelector('button');
btn.onclick = function () {
console.log('클릭1') //작동 안함
};
btn.onclick = function () {
console.log('클릭2') //클릭2
};
|
3) addEventListener 방식
: addEventListener 메서드를 사용하여 요소에 연결하는 방법
→ 요소에 연결할 이벤트와 이벤트가 발생할 때, 처리할 작업을
지정할 수 있음 (추천하는 방법)
→ 이벤트에 하나 이상의 이벤트 리스너를 추가할 수 있음
(동일한 이벤트 리스너 추가 가능)
→ HTML 요소를 포함한 모든 DOM 요소에 대해 동작
예제1
|
/* HTML */
<body>
<button>클릭해보자</button>
</body>
/* JavaScript */
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
console.log('클릭!!');
});
|
예제2
|
/* HTML */
<body>
<button>클릭해보자</button>
</body>
/* JavaScript */
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
console.log('클릭1');
});
btn.addEventListener('click', function () {
console.log('클릭2');
});
|
예제3 - 함수를 따로 정의해서 이벤트 지정하기
|
/* HTML */
<head>
<style>
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<label>당신의 이름은? </label>
<input type="text" placeholder="내용을 입력해주세요">
<button>입력</button>
</body>
/* JavaScript */
const input = document.querySelector('input');
const btn = document.querySelector('button');
function getName() {
let inputValue = input.value.trim();
inputValue && alert(`${input.value}님 환영합니다.`);
/*
a && b
→ a가 Truthy 한 값이면 결과는 b 출력
→ a 가 Falsy 한 값이면, 결과는 a 출력
*/
if(inputValue) {
console.log(Boolean(inputValue));
} else {
console.log(Boolean(inputValue));
};
input.value = ''; //input 값
}
btn.addEventListener('click', getName);
|
💨 결과 확인
💨 코드 확인
4. 이벤트 객체와 event.target
1) 이벤트 객체
: 모든 DOM 요소와 연결된 이벤트가 발생하게 되면, 이벤트 관련
정보는 모두 event 객체에 저장됨
→ 예를 들어, 마우스를 클릭하면 마우스 이벤트에 관련된
정보가 담김
|
/* HTML */
<body>
<button id="box">클릭 상자</button>
</body>
/* JavaScript */
const div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e);
});
|
2) event.target VS e.currentTarget
이벤트 객체 속성에 있는 target과 e.currentTarge 이 들어있다.
이 둘의 차이점을 알아본다.
e.target: 실제 이벤트가 발생된 대상
e.currentTarget: 이벤트 리스너를 붙인 대상, 이벤트를 등록한 대상
|
<html>
<head>
</head>
<body>
<ul class="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<script>
const $btn = document.querySelector('.menu');
$btn.addEventListener('click', function(e) {
console.log('e.currentTarget', e.currentTarget);
console.log('e.target', e.target);
});
</script>
</body>
</html>
|
위 코드는 ul 요소에 클릭 이벤트가 발생하면 e.currentTarget 과 e.target 이 출력되도록 했다.
각 li 요소를 클릭하면, e.currentTarget 는 HTMLUListElement 를, e.target 는 HTMLLIElement
참조하고 있음을 확인할 수 있다. 만약, 아래 그림과 같이 ul (회색 배경부분) 을 클릭하면
e.currentTarget, e.target 둘다 HTMLUListElement 를 참조한다.
5. 기본 이벤트 제거
1) 기본 이벤트
: 일부 요소에는 이미 이벤트 리스너가 들어있다. 예를 들면 a 요소를 클릭하면 다른 페이지로 이동하게 되는데
이것이 기본 이벤트이다.
2) 기본 이벤트 제거
기본 이벤트가 있는 요소에 새롭게 등록한 이벤트 리스너를 연결하여 이벤트를 발생시킬 때, 새롭게 등록한
이벤트 리스너와 함께 기본 이벤트가 호출되기 때문에 원하는 이벤트가 처리가 어려울 수 있다.
이때 기본 이벤트를 제거함으로써 원하는 이벤트가 처리를 가능하게 할 수 있다.
보통 입력 양식에 많이 사용된다. - 리액트를 공부하면서 기본 이벤트를 많이 접하게 되어서 이참에
정리하고 싶었다. - 이 기본 이벤트를 제거하는 방법에 대해서 살펴본다.
기본 이벤트 제거
- preventDefalut()
- returnValue
|
<html>
<head>
</head>
<body>
<form class="inputNum">
<input placeholder="숫자를 입력하세요!" />
<button type="submit">확인</button>
</form>
<p>입력한 값이 들어있나요? <span id="result"></span></p>
<script>
const data = [10, 21, 32, 43, 54, 65];
const form = document.querySelector('form');
const input = document.querySelector('input');
const result = document.querySelector('#result');
result.style.color = 'blue';
result.style.fontSize = '1.5rem';
form.addEventListener('submit', function (e) {
e.preventDefault();
if (input.value !== '') {
let inputValue = parseInt(input.value, 10);
result.innerText = data.includes(inputValue);
}
})
</script>
</body>
</html>
|
위 코드에서 기본 이벤트를 제거해주기 위해 preventDefault 를 사용했다. 기본 이벤트를 사용하지
않으면, submit 을 하게 될 때 데이터가 모두 초기화되므로 submit 이벤트를 제거하므로써 현재 창이
유지될 수 있도록 한다.
6. 수량 선택 UI 만들기
- + 버튼을 누르면 계속 증가하고, - 버튼을 누르면 감소하는 기능
- 선택 버튼을 누르면 현재 선택한 수량을 메세지로 보여줌
💨 코드 확인
💨 결과 확인
이벤트에 대해서 정리해보았고 추가로 쇼핑몰 사이트에 자주 사용되는 수량 체크
부분을 구현해보았다.
모든 이벤트에 대해서는 필요할 때 mdn 을 통해 찾아서 확인해보자!
참조
- 제로초 블러그
: https://www.zerocho.com/category/JavaScript/post/57432d2aa48729787807c3fc
- poiemaweb.com
: https://poiemaweb.com/js-event
- javascript.info
'Frontend study > JavaScript' 카테고리의 다른 글
| deep JavaScript - 2. 호이스팅 (0) | 2022.02.28 |
|---|---|
| deep JavaScript - 1. 변수와 스코프 (0) | 2022.02.28 |
| JavaScript - 9. DOM (= 문서 객체 모델) (0) | 2022.02.27 |
| JavaScript - 8. 객체 (0) | 2022.02.27 |
| JavaScript - 7. 함수 (0) | 2022.02.27 |
