JavaScript에서 동일한 클래스를 가진 여러 요소에 클릭 이벤트 리스너를 올바르게 연결하는 방법은 무엇입니까?

클래스 클릭에 대한 JavaScript 이벤트 리스너

클릭 이벤트 리스너를 클래스에 연결하려면 addEventListener() 메서드를 사용할 수 있습니다. 이 메소드는 세 가지 인수를 사용합니다:

• 이벤트 유형(예: '클릭')
• 리스너 함수
• 선택적 캡처 플래그(일반적으로 false)

귀하의 예에서는 addEventListener() 메서드를 올바르게 사용하고 있습니다. 그러나 두 가지 문제가 있습니다:

1. 요소 선택 실수

HTMLCollection 또는 NodeList를 반환하는 document.getElementsByClassName("classname")을 사용하여 클래스 요소를 선택하고 있습니다. 브라우저). 이는 배열이 아니므로 배열 대괄호 표기법을 사용하여 각 클래스 요소에 이벤트 리스너를 직접 연결할 수 없습니다.

2. 이벤트 리스너 함수 오류

이벤트 리스너 함수에서 클래스 요소에 연결할 때 해당 함수를 호출하고 있습니다. 이는 리스너가 추가되면 함수가 즉시 실행된다는 의미입니다. 대신 함수를 호출하지 않고 참조로 전달해야 합니다.

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

수정된 코드

수정된 코드는 다음과 같습니다.

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

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

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

이제 이 코드는 각 클래스 요소에 이벤트 리스너를 올바르게 추가하고 요소를 클릭할 때 제공된 함수를 트리거하여 경고에 있는 요소의 data-myattribute 속성 값.

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