`addEventListener`가 이벤트 트리거 대신 내 함수를 즉시 호출하는 이유는 무엇입니까?

"addEventListener가 프롬프트 없이 함수를 호출함" 설명

이벤트 리스너를 요소에 연결할 때 다음과 같은 경우에만 함수가 실행되기를 원합니다. 이벤트가 발생합니다. 그러나 경우에 따라 함수가 조기에 호출되지 않도록 하는 것이 까다로울 수 있습니다.

다음 HTML 코드를 고려하세요.

<span>

클릭 이벤트를 두 번째 링크:

second.addEventListener('click', message_me('shazam'));

여기서 'message_me'는 메시지를 표시하는 외부 기능입니다. 놀랍게도 이 코드는 두 번째 링크를 클릭하기 전에도 'message_me' 함수를 즉시 트리거합니다.

문제

문제는 JavaScript가 함수 참조를 처리하는 방식에 있습니다. 'addEventListener'의 두 번째 인수로. JavaScript는 함수에 대한 참조를 기대하지만 문제가 있는 코드에서는 'message_me('shazam')' 함수가 즉시 호출되고 그 결과가 대신 전달됩니다.

해결책

이 문제를 해결하는 방법에는 두 가지가 있습니다.

• 익명 만들기 함수: 익명 함수에 'message_me'를 래핑하여 함수 참조를 반환합니다.

second.addEventListener('click', function() {
    message_me('shazam');
});

이 솔루션을 사용하면 두 번째 링크를 클릭할 때만 'message_me'가 호출됩니다.

• 'message_me'에서 함수 반환: 수정 함수 참조를 반환하는 'message_me':

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

이 경우 'addEventListener'는 클릭 이벤트가 발생할 때 실행될 함수에 대한 참조를 받습니다.

위 내용은 `addEventListener`가 이벤트 트리거 대신 내 함수를 즉시 호출하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!