프론트엔드 첫걸음

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

로그/문제상황

[의문점미해결] 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 객체를 어떻게 받아오는지 아직은 물음표 상태다.

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

'로그 > 문제상황' 카테고리의 다른 글

전역으로 설치된 eslint 없애기  (0) 2023.03.11
Strange behavior of an array filled by Array.prototype.fill()  (0) 2022.11.02
FirebaseError: Firebase: Error (auth/operation-not-allowed).  (0) 2022.10.20
티스토리 Odyssey 스킨에 수정, 삭제 버튼 넣기  (0) 2022.07.22
CSS 속성 변경을 setProperty로 할것인가- useState + inline style로 할것인가  (0) 2022.04.03
'로그/문제상황' Related Articles more