JS 이벤트(Event)

이벤트란 ?

• 웹페이지에서 발생하는 사용자 상호작용을 말한다.

addEventListener

• DOM 요소에 이벤트 리스너를 추가하는 가장 현대적인 방법
• 이벤트를 등록하는 가장 권장되는 방식
• 동일한 이벤트를 여러번 사용 가능

const BTN3 = document.querySelector('#btn3');
BTN3.addEventListener('click', () => (alert('버튼3')));
BTN3.addEventListener('click', test);

// removeEventListener() : 이벤트 추가시 사용했던 이벤트 형식과 콜백함수가 완전 동일해야함
BTN3.removeEventListener('click', test); // 제거할려면 함수만들어둔걸 호출해야함

function test(){
    alert('test함수 알러트');
}

이벤트 객체(Event Object)

• 이벤트가 발생했을 때 해당 이벤트에 대한 정보를 포함하는 객체
• 이벤트 핸들러 함수 내부에서 사용

const BTN4 = document.querySelector('#btn4');
BTN4.addEventListener('click', e => {
    console.log(e); 
    console.log(e.target.value); 
    e.target.style.color = 'red'; 
});

팝업창 만들기

const BTN_POPUP = document.querySelector('#popup');
BTN_POPUP.addEventListener('click', () => {
    window.open('https://www.naver.com/', '', 'width=500 height=500');
}); // window 는 생략가능

모달창 만들기

// 모달
const BTN_MODAL = document.querySelector('#btn-modal');
BTN_MODAL.addEventListener('click', toggleModalContainer)

function toggleModalContainer() {
    const MODAL_CONTAINER = document.querySelector('.modal-container');
    MODAL_CONTAINER.classList.toggle('display-none');
}

// 모달 컨테이너 영역 클릭시 모달 닫기
const MODAL_CONTAINER = document.querySelector('.modal-container');
MODAL_CONTAINER.addEventListener('click', toggleModalContainer);

// 모달 아이템 영역 눌렀을 때 안꺼지게 하는 방법 중 하나
const TEST = document.querySelector('.modal-item');
TEST.addEventListener('click', toggleModalContainer);

마우스 이벤트

// 마우스를 눌렀을 때 이벤트
const H1 = document.querySelector('h1');
H1.addEventListener('mousedown', e => {
    e.target.style.backgroundColor = 'pink';
});
// 마우스를 땟을 때 이벤트
H1.addEventListener('mouseup', e => {
    e.target.style.backgroundColor = '#fff';
});
// 마우스 포인터가 진입했을 때 이벤트
H1.addEventListener('mouseenter', e => {
    e.target.style.color = 'orange'; 
});

// 마우스 포인터가 벗어났을 때 이벤트
H1.addEventListener('mouseleave', e => { 
    e.target.style.color = '#000'; 
});