사용자 스크립트에서 'onclick' 기능이 정의되지 않은 이유는 무엇이며, 이벤트 리스너를 사용하여 문제를 해결하려면 어떻게 해야 합니까?

잡히지 않은 참조 오류: onclick으로 함수가 정의되지 않았습니다

웹 사이트에 대한 사용자 정의 감정 표현 스크립트를 생성하려고 할 때 문제가 발생하여 "잡히지 않은 참조 오류" 오류가 발생했습니다. : onclick으로 함수가 정의되지 않았습니다."

문제

포함된 스크립트 함수를 호출하는 onclick 속성이 있는 스팬 태그. 그러나 이러한 버튼을 클릭했을 때 기능이 인식되지 않았습니다.

해결책

해결책은 별도의 샌드박스 환경에서 작동하므로 사용자 스크립트의 onclick 속성 사용을 피하는 데 있습니다. 대상 페이지 범위에서. 대신 이벤트 리스너를 사용해야 합니다.

이벤트 리스너 구현

이벤트 리스너를 구현하려면 다음 단계를 따르세요.

onclick을 이벤트 리스너로 교체

대신 onclick 속성을 사용하려면 다음으로 대체하세요. addEventListener():

<span>

document.getElementById("mySpan").addEventListener("click", myFunction, false);

데이터 속성을 사용하여 데이터 전달

이벤트 리스너에 데이터를 직접 전달할 수 없으므로 데이터 속성을 사용할 수 있습니다.

<span>

targetSpans = emoteTab[2].querySelectorAll("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener("click", appendEmote, false);
}

이모트 기능 추가

function appendEmote(zEvent) {
    var emoteUsage = this.getAttribute("data-usage");
    shoutdata.value += emoteUsage;
}

추가 주의사항

1. 고유 ID:

각 ID가 페이지당 한 번만 사용되는지 확인하세요. 중복된 ID는 무효입니다.

2. 이벤트 핸들러 제거:

.outerHTML 또는 .innerHTML을 사용하면 기존 이벤트 핸들러가 제거됩니다. 이러한 방법을 사용할 때는 주의하세요.

위 내용은 사용자 스크립트에서 'onclick' 기능이 정의되지 않은 이유는 무엇이며, 이벤트 리스너를 사용하여 문제를 해결하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!