📝콜백 = 콜백 함수
다른 함수의 인자로써 이용되는 함수
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하고 사용방식이 좀 다릅니다
