내 이벤트 리스너가 함수를 즉시 트리거하는 이유는 무엇입니까?

이벤트 리스너: 프롬프트되지 않은 함수 호출의 미스터리

이벤트 리스너로 작업할 때 당황스러운 동작에 직면할 수 있습니다. 외부 함수 참조가 있는 이벤트 리스너를 추가하는 것처럼 보입니다. 요소를 클릭하지 않고도 즉시 함수를 호출합니다. 이는 실망스럽고 예상치 못한 동작으로 이어질 수 있습니다.

다음 HTML 스니펫을 고려하세요.

<span>

클릭 이벤트를 추가하려면 addEventListener 메서드를 사용할 수 있습니다.

first.addEventListener('click', function() {
  alert('sup!');
})

이 코드는 예상대로 작동하여 "첫 번째 링크"를 클릭하면 경고를 트리거합니다. 그러나 외부 함수를 두 번째 인수로 사용하는 경우:

function message_me(m_text) {
    alert(m_text)
}

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

message_me 함수가 즉시 호출되어 "두 번째 링크"를 클릭하기 전에도 경고 메시지가 표시됩니다.

이 문제를 해결하려면 addEventListener의 두 번째 매개변수에 함수 참조가 필요하다는 점을 이해해야 합니다. 문제가 있는 코드에서는 함수가 직접 호출되고 그 결과가 addEventListener에 전달됩니다. 대신 익명 함수를 두 번째 인수로 사용하거나 외부 함수를 수정하여 함수를 반환해야 합니다.

예를 들어 addEventListener 내에서 익명 함수를 사용할 수 있습니다.

function message_me(m_text) {
    alert(m_text)
} 

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

익명 함수 내에 함수 참조를 제공함으로써 "두 번째 링크"를 클릭할 때만 message_me 함수가 호출되도록 보장합니다.

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