요소를 클릭할 때가 아니라 페이지 로드 시 클릭 이벤트 리스너가 실행되는 이유는 무엇입니까?

페이지 로드 시 addEventListener 이벤트 트리거

JavaScript에서 addEventListener() 메서드는 특정 요소에 대한 이벤트 리스너를 등록하도록 설계되었습니다. 그러나 동적으로 생성된 요소에 클릭 리스너를 연결하려고 하면 일부 개발자는 요소를 클릭할 때가 아니라 페이지 로드 시 이벤트가 실행되는 특이한 동작을 경험할 수 있습니다. 이 문제를 해결하기 위해 코드 조각과 해당 실행을 자세히 살펴보겠습니다.

제공된 스크립트에서 document.write()를 사용하여 ID가 ​​"myDiv"인 HTML div 요소가 생성된 후 해당 요소를 검색합니다. document.getElementById("myDiv")를 사용합니다. 그런 다음 addEventListener() 메서드를 사용하여 "클릭" 이벤트에 대한 이벤트 리스너를 검색된 요소에 연결합니다. 리스너는 "clicktrack" 메시지와 함께 경고를 표시하려고 시도하는 "clicktrack")으로 정의됩니다.

문제의 핵심은 이벤트 핸들러가 addEventListener()에 전달되는 방식에 있습니다. 함수 표현식을 사용할 때 함수를 괄호 안에 캡슐화하여 반환 값 대신 함수 자체가 전달되도록 하는 것이 중요합니다. 코드 조각에서 올바른 구문은 다음과 같아야 합니다.

el.addEventListener("click", function() { alert("clicktrack"); }, false);

이 수정은 함수 내의 경고 호출을 캡슐화하여 함수가 함수의 반환 값이 아닌 이벤트 핸들러로 등록되도록 합니다. 한정되지 않은. 결과적으로 이벤트는 페이지 로드 시가 아니라 의도한 대로 "myDiv" 요소를 클릭할 때만 트리거됩니다.

위 내용은 요소를 클릭할 때가 아니라 페이지 로드 시 클릭 이벤트 리스너가 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!