반응형

📝콜백 = 콜백 함수

다른 함수의 인자로써 이용되는 함수

function printANumber(int number, function callbackFunction) {
    print("The number you provided is: " + number);
}
출처: https://satisfactoryplace.tistory.com/18 [만족:티스토리]

 

📝리스너 = 핸들러

리스너 또는 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수

 

📝이벤트

이벤트는 시스템 내에서 발생하는 사건 또는 상황을 나타냅니다

사용자의 입력, 네트워크 활동, 타이머 등 다양한 상황이 이벤트로 간주될 수 있습니다

 

📝이벤트 리스너 = 이벤트 핸들러

특정 이벤트가 발생했을 때 해당 이벤트를 감지하고 설정된 콜백 함수나 핸들러를 호출하는 역할

 

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      const getCandy = () => {
        console.log("borrow candy...");
        return "four candy";
      };
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=self-desktop, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <input type="checkbox" onChange="getCandy()" />
  </body>
</html>

위는 HTML 이벤트에 직접 함수를 할당하는 방식으로 onChange와 같은 이벤트를 넣는 곳에는 "함수()" 이런식으로 사용해야합니다

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <script>
    function say () {
      console.log("hello");  
    }
    
    // document.addEventListener('DOMContentLoaded', function() {
    //   document.querySelector('button').addEventListener('click', say);
    // });

    document.querySelector('button').addEventListener('click', (event) => {
      console.log(event);
      say();
    });
  </script>
  <body>
      <button >Click me</button>   
  </body>
</html>

위는 eventListener를 사용하는 방식으로 참조값을 넣거나 익명함수를 만들어서 사용할 수 있습니다 

 

결론적으로 HTML태그에서 사용하는 경우는 직접 함수를 실행시키도록 "함수()" 이렇게 사용해야하며 eventListener를 이용하는 경우 함수에 대한 정의가 들어가야하는 참조값이나 익명함수를 넣어야합니다

 

참고로 React의 경우 동작방식이 HTML하고 사용방식이 좀 다릅니다

 

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] Tomcat web.xml, Project web.xml, 콜백 지옥  (0) 2022.06.27
[CS 지식] Block, Non-Block, Sync, Async  (0) 2022.06.27
[CS 지식] JIRA, 애플리케이션단(어플리케이션단), ISAM, B+ 트리, 웹 스퀘어  (0) 2022.06.14
[CS 지식] 커넥션풀(DBCP), 디스크 풀, 데이터 풀, 스레드 풀(Thread Pool), 참조데이터  (0) 2022.04.23
[CS 지식] 코딩 컨벤션, R&D, Sandbox, DB 인덱스, 함수(Function), 프로시저(Procedure)  (0) 2022.03.19

티스토리툴바