한 줄의 JavaScript로 여러 요소에 이벤트 리스너를 추가하는 방법은 무엇입니까?

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

여러 HTML 요소로 작업할 때 각 요소에 이벤트 리스너를 추가하는 것은 번거로울 수 있습니다. 개별적으로 하나. 다행스럽게도 JavaScript를 사용하여 이를 달성할 수 있는 더 효율적인 방법이 있습니다.

다음 코드 조각을 고려하세요.

<p>Example 1:</p>
<pre class="brush:php;toolbar:false">element1.addEventListener("input", function() {
  // this function does stuff 
});

Example 2:

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

예제 1에서는 단일 요소에 이벤트 리스너를 추가하는 반면, 예 2에서는 다음을 시도합니다. 여러 요소에 이벤트 리스너를 추가합니다. 그러나 예제 2의 구문은 올바르지 않습니다.

해결책은 JavaScript의 forEach() 메서드를 사용하는 것입니다. 이벤트 리스너를 추가하려는 요소가 포함된 배열이 있다고 가정합니다. 이 경우 다음 코드를 사용할 수 있습니다.

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

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

이 코드에서 querySelectorAll("whatever")는 지정된 선택기와 일치하는 요소의 배열을 반환합니다. 그런 다음 forEach() 메서드는 배열의 각 요소를 반복하고 원하는 이벤트 리스너를 추가합니다.

이 메서드는 이벤트 리스너를 여러 요소에 동시에 추가하는 간결하고 효율적인 방법을 제공합니다. 배열과 forEach() 메서드를 활용하면 JavaScript 프로젝트의 코드 중복을 줄이고 효율성을 높일 수 있습니다.

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