[Javascript] 이벤트 - addEventListener, EventTarget, mouseenter, mouseleave, focus, blur, keyup, change 이벤트

⭐ 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 = '';

});

add_to_queue 새 창에서 열기

 

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();

});