이벤트가 발생했을 때 함수를 호출하려면?
버튼을 클릭했을 때 메시지 상자가 나오게 만들어 보자.
/*만약 웹페이지를 열거나 새로고침했을 때
바로 메시지 상자가 나오게 하려면 그냥
displayMessage();라고 적으면 된다.
*/하지만 버튼을 클릭했을 때(이벤트) 메시지 상자가 나오게 하려면 이렇게 적으면 안 된다. 위와 같이 함수 뒤에 ()를 적는 건 함수를 즉시 호출하라는 의미이기 때문이다.
웹페이지를 열었을 때가 아니라 버튼을 클릭했을 때 메시지 상자가 나오게 하려면 이렇게 적어야 한다.
✨ btn.onclick = displayMessage; ✨즉, () 없이 적어야 한다.
이벤트가 발생했을 때 파라미터가 있는 함수를 호출하고 싶다면?
익명 함수(anonymous function)를 사용해야 한다.
예를 들어, 아래와 같이 파라미터가 있는 함수 🔽
function displayMessage(msgText, msgType) {}를 버튼을 클릭했을 때 호출하려면
btn.onclick = function() {
displayMessage('Woo, this is a different message!');
};함수를 직접 호출할 수 없으므로 익명 함수를 사용해야 한다.
If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked. - 출처: MDN
직접 호출하면 페이지를 열자마자 함수가 실행되기 때문이다(global scope에 함수 호출 코드를 적으니까..?). 그런데 우리는 페이지를 열었을 때가 아니라 버튼을 클릭했을 때 함수를 호출하고 싶다. 그래서 함수가 즉시 호출되지 않게 익명 함수 안에 넣는 것이다.
✨