developer tip

요소에 이벤트 리스너가 있는지 확인하십시오.

optionbox 2020. 12. 11. 08:03
반응형

요소에 이벤트 리스너가 있는지 확인하십시오. jquery 없음


아래 코드와 같이 인라인 함수를 사용하는 경우 요소에 이벤트 리스너가 있는지 확인하는 방법. 함수를 호출하고 이벤트 리스너를 추가하는 함수가 있기 때문에 중복 이벤트 리스너가 발생하여 함수를 두 번 트리거합니다. 그래서 이벤트 리스너가 이미 존재하는 경우 추가하지 않도록 어떻게 확인할 수 있습니까? 감사! :디

for (var a = 0;a<formFieldInput.length;a++) {
            if(formFieldInput[a].hasAttribute("name") && formFieldInput[a].attributes.title.value !== "Valid Until") {
                formFieldInput[a].addEventListener("click",function(event) {
                    toggleFieldList(event,"show");
                });
            }

이를 달성하기위한 JavaScript 기능은 없습니다. 그러나 true리스너를 추가 false할 때 제거 할 때 부울 값을로 설정할 수 있습니다 . 그런 다음 잠재적으로 중복 이벤트 리스너를 추가하기 전에이 부울을 확인하십시오.

중복 가능성 : 동적으로 연결된 이벤트 리스너가 있는지 여부를 확인하는 방법은 무엇입니까?


요즘 (2016) Chrome Dev Tools 콘솔에서 아래의이 함수를 빠르게 실행하여 요소에 연결된 모든 이벤트 리스너를 표시 할 수 있습니다.

getEventListeners(document.querySelector('your-element-selector'));

그럴 필요가 없습니다. 원하는만큼, 원하는만큼 자주 때리기 만하면됩니다. MDN은 동일한 이벤트 리스너를 설명합니다 .

동일한 매개 변수를 사용하여 동일한 EventTarget에 동일한 EventListener가 여러 개 등록 된 경우 중복 인스턴스가 삭제됩니다. EventListener가 두 번 호출되지 않으며 removeEventListener메서드를 사용하여 수동으로 제거 할 필요가 없습니다 .

참고 URL : https://stackoverflow.com/questions/28056716/check-if-an-element-has-event-listener-on-it-no-jquery

반응형