JavaScript 클래스에서 클릭 이벤트 리스너를 올바르게 구현하는 방법은 무엇입니까?

JavaScript의 클래스에 클릭 이벤트 리스너 구현

JavaScript에서 이벤트 리스너는 사용자 상호 작용을 처리하는 데 선호되는 방법입니다. 클릭한 요소에서 속성을 얻으려고 할 때 리스너는 기존 이벤트 핸들러를 사용하는 것보다 더 효율적인 접근 방식을 제공합니다.

제공된 코드 조각에서:

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

문제는 addEventListener가 어떻게 작동하는지에 있습니다. 호출됩니다. 이벤트 리스너 함수 myFunction은 뒤에 괄호를 추가하여(myFunction()) 즉시 실행됩니다. 대신 함수 참조 자체를 두 번째 인수로 전달해야 합니다.

classname.addEventListener('click', myFunction, false);

또한 getElementsByClassName은 HTML 요소가 아닌 노드 목록을 반환합니다. 노드 목록의 각 요소에 이벤트 리스너를 적용하려면 다음을 반복해야 합니다.

var elements = document.getElementsByClassName("classname");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction);
}

ES6를 지원하는 브라우저에서는 forEach 메서드를 사용하여 보다 간결한 솔루션을 얻을 수 있습니다.

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', myFunction);
});

이러한 조정을 해결함으로써 코드는 이제 다음과 같은 외부 라이브러리를 사용하지 않고도 JavaScript 이벤트 리스너를 사용하여 클릭한 요소의 속성을 올바르게 캡처해야 합니다. jQuery.

위 내용은 JavaScript 클래스에서 클릭 이벤트 리스너를 올바르게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!