Javascript의 여러 DOM 요소에 이벤트 리스너 추가
가장 간단한 형태로 DOM 요소에 이벤트 리스너를 추가하려면 다음 두 가지 작업을 수행해야 합니다.
DOM에서 요소 선택
전.
const elem = document.querySelector('#name-of-id')(여기서는 getElementById() 메서드 대신 CSS 선택기 '#'를 사용하여 해당 ID로 요소를 선택하고 있습니다.)선택한 요소에 이벤트 리스너 추가
전.
elem.addEventListener("click", renderAction)(여기서 renderAction는 이벤트 클릭 후 호출되는 콜백 함수입니다.)그러나 각각에 대해 addEventListener()를 작성하지 않고 모든 요소에 클릭 이벤트 리스너를 추가하려는 DOM의 여러 요소를 선택하려면 어떻게 해야 할까요?
세 가지를 수행하여 이를 달성할 수 있습니다.
1. 메서드를 사용하여 모든 요소 선택
querySelectorAll()2. 다음과 같은 루프를 사용하여 요소의 NodeList 컬렉션 순회forEach3. NodeList의 각 요소에 이벤트 리스너 추가querySelectorAll() 및 NodeList 사용
다음과 같은 html이 있다고 가정해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Instruments </title>
</head>
<body>
<div id="instrument-container">
<div class="instrument">Piano</div>
<div class="instrument">Trumpet</div>
<div class="instrument">Saxophone</div>
<div class="instrument">Flute</div>
</div>
<script src="./index.js"></script>
</body>
</html>
We can use javascript to select all of the elements with a class of
"instrument"
const instElems = document.querySelectorAll('.instrument')
이 경우 CSS 선택기
'.' 점을 사용하여 클래스가 "instrument"인 모든 요소만 선택하도록 지정합니다.querySelectorAll() 메서드는 이러한 요소를 NodeList 컬렉션에 추가합니다. DOM은 노드의 트리이므로 DOM에서 선택할 때 해당 노드를 선택한다는 점을 기억하십시오.forEach()를 사용하여 NodeList 순회
배열이 요소를 순회하기 위해 forEach() 루프를 사용하는 것처럼 NodeList 객체에도 순회를 위한 내장형 forEach() 메서드가 있습니다.
다음 자바스크립트에서는 NodeList
instElems를 순회합니다.const instElems = document.querySelectorAll(".instrument")
instElems.forEach(elem => {
console.log(elem)
})
해당 코드를 분석해 보겠습니다.
instElems는 NodeList 컬렉션forEach는 익명 함수에 변수elem로 전달되는 각 요소를 순회합니다(화살표 표기법 사용)elem의 모든 요소 instElems에 대해 console.log 요소 결과는 다음과 같습니다.
As you can see, it console logs all of the
<div>elements with"instrument"as their class
NodeList의 모든 요소에 클릭 이벤트 리스너 추가
이제 NodeList가 있으므로 다시 순회하지만 이번에는 모든 노드에 대한 이벤트 리스너를 추가합니다.
다음 코드는 이 작업을 수행합니다.
const instElems = document.querySelectorAll(".instrument")
instElems.forEach(elem => {
elem.addEventListener("click", (event) => {
console.log(event.target.innerText, "clicked")
})
})
instElems의 각 요소(모든 악기<div>)에 대해 이벤트 리스너를 추가합니다. <div>를 클릭하면 이벤트 리스너가 해당 <div>에 대한 익명 함수를 호출합니다. <div> 요소 내부의 텍스트와 클릭되었음을 알리는 문자열을 기록합니다. 데모:
결론
몇 줄의 코드로 여러 DOM 요소에
"click"와 같은 이벤트 리스너를 추가하는 방법을 살펴보았습니다. DOM 요소를 직접 순회할 필요 없이 NodeList 컬렉션에 추가하는 내장 선택기 메서드를 사용하여 수행했습니다. 이벤트 리스너를 요소에 적용하는 지점에서만 순회가 발생합니다. 우리는 NodeList의 내장 루프 메서드를 사용하여 이를 수행했습니다.<div> 를 NodeList 컬렉션에 저장하는 것의 또 다른 좋은 점은 이제 매번 컬렉션을 선택할 필요 없이 필요할 때 동일한 <div> 의 컬렉션을 참조할 수 있다는 것입니다.팁: 컬렉션으로 더 많은 작업을 수행해야 하는 경우 Array.from() 메서드를 사용하여 컬렉션을 배열로 변환할 수도 있습니다.
참조:
MDN Doc - NodeList
W3 Schools - CSS Selectors
MDN Doc - addEventListener
MDN Doc - querySelectorAll
Instruments Image
Reference
이 문제에 관하여(Javascript의 여러 DOM 요소에 이벤트 리스너 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/guzdaniel/add-event-listeners-to-multiple-dom-elements-in-javascript-ian텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
