반응형

함수에 인수를 전달하려면 ? ⇒ 함수를 호출할 때 전달해야 한다.

이벤트 핸들러 어트리뷰트 방식은 함수 호출문 방식을 사용할 수 있기 때문에 인수를 전달할 수 있지만 이벤트 핸들러 프로퍼티 방식과 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
반응형
//HTML
<div id='user' data-id='1' data-user='xyz' data-age='19'>user1</div>
<div id='bevarage' data-id='coffee' data-category='hot-brewed' data-isCaffein='non-caffeine'>Decaffeine Hot Americano</div>
//JavaScript
const person = document.querySelector('#user')
//person.dataset.id = 1
//person.dataset.user = 'xyz'

console.log(person.dataset.user)
console.log(person.dataset.age)

const cafe = documemnt.quuerySecector('#category')
//cafe.dataset.id = coffee
//cafe.dataset.category = 'hot-brewed'

console.log(cafe.dataset.id)
console.log(cdafe.dataset.iscaffin)

=== xyz
===19

=== coffee
=== non-caffein

'[JS] Modern JavaScript' 카테고리의 다른 글

[JS]-JavaScript 이벤트 핸들러에 인수 전달  (0) 2022.08.18

+ Recent posts

티스토리툴바