>  기사  >  웹 프론트엔드  >  한 줄에 있는 여러 요소에 이벤트 리스너를 연결하는 방법은 무엇입니까?

한 줄에 있는 여러 요소에 이벤트 리스너를 연결하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-10-26 03:15:02358검색

 How to Attach Event Listeners to Multiple Elements in a Single Line?

여러 요소에 동시 이벤트 리스너 연결:

웹 개발에서 이벤트 리스너를 DOM 요소에 연결하는 것은 상호작용에 매우 중요합니다. 여러 요소를 처리할 때 리스너를 개별적으로 추가하는 것은 지루할 수 있습니다. 이 문서에서는 동일한 이벤트 리스너를 한 줄의 여러 요소에 할당하는 방법에 대한 질문을 다룹니다.

다음 예를 고려하세요.

<code class="javascript">element1.addEventListener("input", function() {
  // this function does stuff 
});

element2 &amp;&amp; element2.addEventListener("input", function() {
  // this function does stuff
});</code>

이 접근 방식이 작동하는 동안 별도로 작성해야 합니다. 각 요소에 대한 선입니다. 보다 효율적인 솔루션은 요소 배열을 사용하는 것입니다. 방법은 다음과 같습니다.

<code class="javascript">let elementsArray = document.querySelectorAll("whatever");

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

배열에 요소를 배치하면 각 요소를 반복하고 한 줄로 모든 요소에 이벤트 리스너를 추가할 수 있습니다. 이 기술은 이벤트 리스너 첨부 코드를 단순화하는 간결하고 편리한 방법을 제공합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.