한 줄의 코드로 여러 요소에 이벤트 리스너를 추가하려면 어떻게 해야 합니까?

한 줄의 여러 요소에 이벤트 리스너 추가

여러 요소로 작업할 때 각 요소에 이벤트 리스너를 추가하는 것은 지루할 수 있습니다. 개별적으로 하나. 다행히도 이 프로세스를 간소화하고 코드 한 줄로 여러 요소에 이벤트 리스너를 추가할 수 있는 방법이 있습니다.

루프 사용

한 가지 효과적인 방법은 다음과 같습니다. 루프를 사용하여 요소 배열을 반복하고 각각에 이벤트 리스너를 추가합니다. 예를 들면 다음과 같습니다.

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

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

이 코드는 지정된 선택기와 일치하는 모든 요소를 ​​선택하고 "입력" 이벤트에 대해 각 요소에 이벤트 리스너를 추가합니다.

문법적 고려 사항

두 번째 예에서 문법 문제를 발견했을 수 있습니다.

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

이 구문은 문법적으로 올바르지 않습니다. 이를 작성하는 올바른 방법은 다음과 같습니다.

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

그러나 이 방법은 각 요소에 이벤트 리스너를 별도로 추가하므로 여전히 효율적이지 않습니다. 위에 설명된 루프 접근 방식은 더욱 최적화된 솔루션입니다.

위 내용은 한 줄의 코드로 여러 요소에 이벤트 리스너를 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!