클래스에 이벤트 리스너를 추가하는 데 `classname.addEventListener(\'click\', myFunction(), false);`가 작동하지 않는 이유는 무엇입니까?

클래스용 이벤트 리스너: 실용 가이드

클릭 시 클래스 속성 값을 캡처하는 과정에서 JavaScript 코드에 문제가 발생했을 수 있습니다. 특히, classname.addEventListener('click', myFunction(), false); 요소에 이벤트 리스너를 등록하지 못했습니다.

이 문제를 해결하려면 코드를 단계별로 분석해 보겠습니다.

1. getElementsByClassName: 이 메서드는 요소를 올바르게 선택합니다. 지정된 클래스 이름을 사용합니다. 그러나 배열이 아니라 HTMLCollection이라는 배열과 유사한 객체를 반환합니다.
2. addEventListener: 이 메서드는 세 가지 매개 변수를 사용합니다. (a) 이벤트 유형(이 경우 '클릭' ), (b) 이벤트 리스너 함수 및 (c) 캡처 단계(일반적으로 버블링 이벤트의 경우 false). 코드에서 myFunction()은 addEventListener 메서드가 호출되면 즉시 실행되어 함수 호출 결과를 이벤트 리스너로 전달합니다. 이것은 올바르지 않습니다.
3. 함수: 익명 함수 myFunction은 "data-myattribute" 속성을 가져와서 경고 상자에 표시합니다. 코드의 이 부분이 정확합니다.

수정된 코드:

문제를 해결하려면 getElementsByClassName에서 반환된 각 요소에 이벤트 리스너를 올바르게 연결해야 합니다. . 수정된 코드는 다음과 같습니다.

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);
}

수정 설명:

1. 배열형 객체: HTMLCollection을 더 나은 것을 위해 요소 변수 사용법.
2. 루핑: 각 요소에 리스너를 연결하기 위해 루프를 사용하여 요소 배열과 유사한 객체를 반복합니다.
3. EventListener: 이벤트 리스너를 추가하는 올바른 구문이 사용되며 myFunction을 리스너.

ES6에서는 루프 및 이벤트 리스너 추가를 더 간결하게 수행할 수 있습니다.

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

IE6-8과 같은 이전 브라우저의 경우 다음이 있는지 확인하는 것이 좋습니다. 사용하기 전에 getElementsByClassName을 사용하세요.

위 내용은 클래스에 이벤트 리스너를 추가하는 데 `classname.addEventListener(\'click\', myFunction(), false);`가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!