[자바스크립트] Evnets

91Savage·2022년 9월 25일
0

Javascript

목록 보기
9/10
const title = document.querySelector('div.helo:first-child h1');

console.dir(title);

function handleTitleClick() {
    title.style.color = 'blue';
}
function handleMouseEnter() {
    title.innerText = 'mouse is here!';
}
function handleMouseLeave() {
    title.style.color = 'mouse is gone!';
}

function handleWindowResize() {
    document.body.style.backgroundColor = 'tomato';
}

function handleWindowCopy() {
    alert('copier');
}

function handleWindowOffline() {
    alert('SOS!');
}

function handleWindowOnline() {
    alert('all Good!');
}

// title.addEventListener('click', handleTitleClick);
title.onclick = handleTitleClick;
// title.addEventListener('mouseenter', handleMouseEnter);
title.onmouseenter = handleMouseEnter;
// title.addEventListener('mouseleave', handleThandleMouseLeave);
title.onmouseleave = handleThandleMouseLeave;

// addEventListener 는 .removeEventListener로 나중에 삭제 할 수 있기 때문에
// addEventListener 를 더 선호함

window.addEventListener('reseize', handleWindowResize);
window.addEventListener('copy', handleWindowCopy);
window.addEventListener('offline', handleWindowOffline);
window.addEventListener('online', handleWindowOnline);

loginForm.addEventListener("submit", onLoginSubmit); // submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미 // JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들

★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
event.preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');

const link = document.querySelector('a');

function onLoginSubmit(event) {
    event.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
    console.log(loginInput.value);
}

function handleLinkClick(event) {
    event.preventDefault();
    console.dir(event);
}

loginForm.addEventListener('submit', onLoginSubmit); //submit이 되었을 때만 onLoginSubmit 실행
link.addEventListener('click', handleLinkClick);

handleLinkClick();

addEventListener 안에 있는 함수는 직접 실행하지 않는다
브라우저가 실행시켜주고
브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 된다.
addEventListener의 함수에서 object에 대한 자리만 할당해주면
해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다!
이때 해당 이벤트가 가진 기본 Default값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있다!

0개의 댓글