Wanna be Brilliant Full-Stack Developer

2/15 바닐라JS 크롬앱 만들기 Events #1 & #2 본문

Front-End

2/15 바닐라JS 크롬앱 만들기 Events #1 & #2

Flashpacker 2022. 2. 15. 12:23

목표

우리는 submit이라는 event가 발생하는걸 아예 막거나 중간에 개입해서 submit event가 발생했다는걸 파악하고 싶다! 

 

우리가 기억해야될점은 submit은 엔터를 누르거나 버튼을 클릭할때발생한다는 사실을 기억해야한다

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");


function  onLoginSubmit() {
  const username = loginInput.value;
  console.log(username);
}


loginForm.addEventListener("submit" , onLoginSubmit)

우리의 미션 하나는 form submit을 할떄 입력값을 받아내는 거고 그건 우리가 방금 이 코드로 해냈다! 

우리는 submit event을 감지하고 있다는 뜻이다.  하지만 아직은 새로고침은 못 막고 있다...

여기서 새로고침이 일어나는건 form submit의 기본 동작이다.

브라우저가 그로도록 프로그래밍이 되어있다는 것이다.  ( 브라우저는 엔터를 누를 때 새로고침을 하고 form을 submit하도록 되어있다) 

 

우리가 해야할 일은 이 기본 동작이 발생하지 않도록 하는것이다!

우리가 addEventListner를 활용할 때는 바로 실행시키려고 하는게 아니다. 

addEventlistner를 활용할 떄는 function의 이름만 적어주고 그럼 지정한 이벤트가 발생했을 때만 브라우저가 해당 fucntion을 실행시키는것이다.  우리가 직접 할필요가 없다는뜻

 

정확히 짚어 보자면 브라우저가 정확히는 onLoginSubmit()을 하고 있는게 아니다. 브라우저는 우선 onLoginSubmit fucntion을 호출하고 브라우저는 브라우저 내부에서 event로부터 정보를 잡아내서 onLoginSubmit fucntion 실행 버튼을 누르고 있다. 

 

중요한건 event가 발생할떄 브라우저가 네 function을 호출하게 되는데 이렇게 onLoginSubmit()  비어 있는 채로 호출하지 않고 여기에 첫 번쨰 argument로써 추가적인 정보를 가진 채로 호출하게 된다. 

어떤 정보를 브라우저가 주고 있는지 보여주기 위해 신비한 코드를 추가하려고하는데! 

지금 중요한건 브라우저가 우리한테 어떤 정보를 넘겨주는지 확인하고 console.log해보려고한다 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");


function  onLoginSubmit(tomato) {
    tomato.preventDefault();
  console.log(tomato);
}


loginForm.addEventListener("submit" , onLoginSubmit)

우리는 onLoginSubmit function 에대한 argument로 어떤 정보를 얻고있는걸 확인할 수 있는데 

이 function이 하나의 argument(tomato)를 받도록 우리는 하고 있는데

이 function이 하나의 argument을 받도록 하고 그걸 JS에 넘겨주고 있따. 

발생한 일에 대해 우리가 필요할 만한 정보들을 주는것이다. 

모든 EventListner function의 첫번쨰 argument는 항상 지금 막 벌어진 일들에 대한  정보가 된다! 

우리는 argument공간만 제공하면 된다.  그러면 JS는 방금일어난 event에 대한 정보를 지닌 argument를 채워넣을것이다. 

tomato.prevenDefault(); 여기는 prventDefault라는 function을 호출한것 뿐 이 기능이 하는 일은 어떤 event의 기본 행동이든지 발생되지 않도록 막는것이다.  기본 행동이란 어떤 기능에 대해 브라우저가 기본적으로 수행하는 동작이다. 

 

function onLoginSubmit(tomato) {
    tomato.preventDefault();
  console.log(tomato);
}

여기에 onLoginSubmit()을 채우는건 선택 사항이다. 만약 정보가 필요하지 않으면 안채워도된다.

만약 여기에 공간을 만들어주면 JS에서 event를 채워줄것이다. 

 

<body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
    </form>
    <a href="https://nomadcoders.com">Go to courses</a>
    <script src="app.js"></script>
  </body>

a 링크의 기본동작은 무엇인가? 링크의 기본동작은 클릭시 다른 페이지로 이동하는것이다. 

이제는 우리가 이 기본동작을 막아보려고한다! 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");

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

function onLoginSubmit(event) {
    event.preventDefault();
  console.log(loginInput.value);
}

function handleLinkClick() {
  alert("clicked"); 
}

link.addEventListener("click" , handleLinkClick)
loginForm.addEventListener("submit" , onLoginSubmit)

alert가 떠있는 순간에는 a링크의 기본동작이 막히지만 확인을 누르는 순간 그 기본동작이 발동한다..

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");

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

function onLoginSubmit(event) {
    event.preventDefault();
  console.log(loginInput.value);
}

function handleLinkClick(event) {
  console.log(event);
  alert("clicked"); 
}


loginForm.addEventListener("submit" , onLoginSubmit)
link.addEventListener("click" , handleLinkClick)

유저가 어디를 클릭했는지 알아야할때가 있는데 유저가 스크린 상 클릭한 위치를 X,Y 좌표로 제공하고있다. 

보다시피 이벤트로부터 얻을 수 있는 다양한 정보가 존재하고 다양한 이벤트들이 존재한다 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");

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

function onLoginSubmit(event) {
    event.preventDefault();
  console.log(loginInput.value);
}

function handleLinkClick(event) {
  event.preventDefault();
  console.log(event);

}


loginForm.addEventListener("submit" , onLoginSubmit)
link.addEventListener("click" , handleLinkClick)

이렇게 또 preventDefault(); 를 통해서 a링크의 기본동작 처리를 막고있다! 

 

가장 중요한건 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것이다.

우리가 하는게  아니라 이건 브라우저가 하는것이고 브라우저는 실행만 시켜주는게 아니라 event에대한 정보다 담아줄것이다. 우리는 자리만 만들어주면 되고 이 정보 안에는 몇가지 함수도 같이 들어있다! 

예를 들면 preventDefault 함수 를 호출하게 되면 event는 멈추게 되고 아무것도 진행하지 않고 우리가 브라우저에 대한 모든걸 컨트롤하게 된다! 

 

 

'Front-End' 카테고리의 다른 글

2/15 바닐라 JS 크롬앱 만들기 Loading Username  (0) 2022.02.15
2/15 바닐라 JS 크롬앱 만들기 Getting & Saving Username  (0) 2022.02.15
2/15 바닐라 JS 크롬앱 만들기! input values, From Submission  (0) 2022.02.15
바닐라 JS 크롬앱만들기 CSS in Javascript #3  (0) 2022.02.11
바닐라 JS 크롬앱 만들기 CSS in JavaScript #2  (0) 2022.02.11
'Front-End' Related Articles more