반응형
함수에 인수를 전달하려면 ? ⇒ 함수를 호출할 때 전달해야 한다.
이벤트 핸들러 어트리뷰트 방식은 함수 호출문 방식을 사용할 수 있기 때문에 인수를 전달할 수 있지만 이벤트 핸들러 프로퍼티 방식과 addEvenetListener 메서드 방식의 경우 이벤트 핸들러 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록해야한다. 따라서 인수를 전달할 수 없다.
<!DOCTYPE html>
<html>
<body>
<label>User Name</label>
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
const checkUserNameLenght = min => {
$msg.textContent
= $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
}
//이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
$input.onblur = () => {
checkUserNameLenght(MIN_USER_NAME_LENGTH);
};
</script>
</body>
</html>
또는 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 잇ㅆ다.
<!DOCTYPE html>
<html>
<body>
<label>User Name</label>
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
//이벤트 핸들러를 반환하는 함수
const checkUserNameLenght = min => e => {
$msg.textContent
= $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
};
//이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
$input.onblur = checkUserNameLenght(MIN_USER_NAME_LENGTH)
</script>
</body>
</html>
checkUserNameLenght 함수는 함수를 반환한다. 따라서, $input.onblur 에는 결국 checkUserNameLenght 함수가 반환하는 함수가 바인딩한다.
'[JS] Modern JavaScript' 카테고리의 다른 글
| [JS]-JavaScript -dataset 속성 (0) | 2022.08.18 |
|---|