웹/JavaScript
[Javascript] 이벤트 - addEventListener, EventTarget, mouseenter, mouseleave, focus, blur, keyup, change 이벤트
Judith Hopps
2023. 1. 15. 15:12
반응형
⭐ addEventListener - EventTarget의 기능
- 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행
- 👉 MDN 문서 보기
- 👉 이벤트 목록 MDN 문서 보기
click 이벤트
- 요소가 클릭되었을 때
document.querySelector('#button1')
.addEventListener('click', () => {
alert('ㅇㅇ 어서오고');
});
- alert - 주어진 메시지로 알림 팝업 띄움
이벤트 객체
// ♻️ 새로고침 후 실행
document.querySelector('#button1')
.addEventListener('click', (e) => {
console.log(e);
});
- 프로토타입을 따라 올라가 볼 것
💡 이벤트 리스너에서의 this
// ♻️ 새로고침 후 실행
document.querySelector('#button1')
.addEventListener('click', function (e) {
console.log(this);
console.log(e.target);
this.textContent = '클릭됨';
});
// ♻️ 새로고침 후 실행
document.querySelector('#button1')
.addEventListener('click', (e) => {
console.log(this);
console.log(e.target);
e.target.textContent = '클릭됨';
});
- function 선언 함수와 화살표 함수 비교
mouseenter, mouseleave 이벤트
- 마우스 커서가 들어올/나갈 때
const $button2 = document.querySelector('#button2');
let timeout;
let interval;
let countdown;
$button2.addEventListener('mouseenter', () => {
if (timeout) clearTimeout(timeout);
$button2
.firstElementChild
.textContent = '💣 치워라, 5초 준다';
timeout = setTimeout(() => {
$button2
.firstElementChild
.textContent = '🔥🔥🔥🔥🔥🔥🔥🔥🔥';
}, 5000);
});
$button2.addEventListener('mouseleave', () => {
if (timeout) clearTimeout(timeout);
$button2
.firstElementChild
.textContent = '올리지 말라고 하면 올리지 마라';
});
- 🔗 setTimeout - 타임아웃 설정, clearTimeout에 사용될 식별자 반환
- 🔗 clearTimeout - 인자로 주어진 식별자의 타임아웃 해제
💡 같은 이벤트에 대해 여러 핸들러 등록 가능
$button2.addEventListener('mouseenter', () => {
if (interval) clearInterval(interval);
countdown = 5;
$button2
.lastElementChild
.textContent = countdown;
interval = setInterval(() => {
$button2
.lastElementChild
.textContent = --countdown;
if (!countdown) clearInterval(interval);
}, 1000);
});
$button2.addEventListener('mouseleave', () => {
if (interval) clearInterval(interval);
countdown = 0;
$button2
.lastElementChild
.textContent = countdown;
});
- 🔗 setInterval - 첫 번째 인자로 받은 콜백함수를 두 번째 인자의 밀리초마다 실행
- 🔗 clearInterval - 인자로 주어진 식별자의 인터벌 해제
focus, blur 이벤트
- 요소가 포커스(입력을 위해 선택)되었을 때 / 해제되었을 때
const $input1 = document.querySelector('#input1');
$input1.addEventListener('focus', () => {
$input1.setAttribute('placeHolder', '어! 왜, 뭐 입력하시게요?');
});
$input1.addEventListener('blur', () => {
$input1.setAttribute('placeHolder', '그냥 가시네...');
});
keyup 이벤트
- 키보드 키가 눌린 후 올라올 때
- keydown, keypress와 비교
const $ul = document.querySelector('ul');
const $input2 = document.querySelector('#input2');
$input2.addEventListener('keyup', (e) => {
if (e.key !== 'Enter') return;
$newLi = document.createElement('li');
$newLi.textContent = e.target.value;
$ul.appendChild($newLi);
e.target.value = '';
});
change 이벤트
- 인풋 요소의 값이 바뀔 때
document.querySelector('#school')
.addEventListener('change', (e) => {
console.log(e.target.value);
fillRaceTable();
});
document.querySelector('#grade')
.addEventListener('change', () => {
fillRaceTable();
});
document.querySelector('#sort')
.addEventListener('change', () => {
fillRaceTable();
});
반응형