로그/문제상황

[의문점미해결] inline EventListener에 event넘겨주기

차정 2022. 8. 14. 01:44

자바스크립트는 event를 안 넘겨주고도 함수가 event를 사용할 수 있다.

<body>
    <form action="">
      <div><input type="text" oninput="inputHandler()" /></div>
    </form>

    <script>
      function inputHandler() {
        console.log(event.target.value);
      }
    </script>
 </body>

 

만약 inline으로 event를 넘겨주려면 반드시 'event'여아한다. 'e'를 넘겨주면 안된다.

함수에서 매개변수로 받는게 없어도 함수내에서 event사용할 수 있다.

<body>
    <form action="">
      <div><input type="text" oninput="inputHandler(event)" /></div>
    </form>

    <script>
      function inputHandler() {
        console.log(event.target.value);
      }
    </script>
 </body>

 

inline으로 event넘겨준 것이 있으면 event를 e로 축약해서 쓸 수 있다.

<body>
    <form action="">
      <div><input type="text" oninput="inputHandler(event)" /></div>
    </form>

    <script>
      function inputHandler(e) {
        console.log(e.target.value);
      }
    </script>
 </body>

 

자바스크립트는 위와 같다.

 

한편 리액트는?

inline함수로 event넘겨주지 않고, event를 반드시 받아야 한다. 
  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };                                 
  요기서 (event) 이부분이 꼭 있어야된다.


자바스크립트는
 function inputHandler() {
    console.log(event.target.value);
}
이렇게 해도 event를 갖다 썼었다는 것..

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };
  
  return (
    <form onSubmit={submitHandler}>      
      <input
        type='text'
        value={enteredTitle}
        onChange={titleChangeHandler}
      />
    </form>
    )

 

자바스크립트가 event 객체를 어떻게 받아오는지 아직은 물음표 상태다.

공부하다보면 알게되었을때 더 무릎을 쎄게 치려고 기록해둔다.