JavaScript의 여러 요소에 이벤트 리스너를 효율적으로 연결하는 방법은 무엇입니까?

여러 요소에 이벤트 리스너를 쉽게 추가

질문:

이벤트 리스너를 여러 요소에 연결하는 효율적인 방법이 있습니까? 요소를 동시에 처리하면 각 요소에 대해 별도의 이벤트 처리가 필요하지 않습니까?

예:

일반적으로 이벤트 리스너는 개별적으로 추가됩니다.

element1.addEventListener("input", function() {
  // this function does stuff
});

element2.addEventListener("input", function() {
  // this function does stuff
});

답변:

JavaScript에서는 요소 배열에 forEach() 메서드를 활용하여 코드 한 줄로 각 요소에 대한 이벤트 리스너를 생성할 수 있습니다.

해결책:

이를 달성하려면 요소가 포함된 배열을 만듭니다.

let elementsArray = document.querySelectorAll("whatever");

그런 다음 forEach() 메서드를 사용하여 배열을 반복하고 각 요소에 이벤트 리스너 추가:

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        // This function does stuff
    });
});

이 접근 방식은 여러 요소에 이벤트 리스너를 추가하는 간결하고 효율적인 방법을 제공하여 이벤트 처리 코드를 간소화합니다.

위 내용은 JavaScript의 여러 요소에 이벤트 리스너를 효율적으로 연결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!