[Javascript] querySelectorAll 에 addEventListener 적용하기

● addEventListener는 document내의 특정 요소의 이벤트를 감지할 때 사용하는 method이다.

function testEvent() {
    const vary = document.querySelector('.selector')
    vary.addEventListener('click', (e) => {
    //함수내용
    }
}

이렇게 querySelector 선택자를 이용해서 html내의 특정 요소를 선택한 뒤, 선택한 요소에 addEventListener을 이용해서 특정 이벤트를 감지한다.

 

하지만 선택자와 일치하는 문서 내 첫 번째 Element를 반환하는 querySelector과는 달리, querySelectorAll메서드는 지정된 selector 그룹에 일치하는 다큐먼트의 Element List를 나타내는 정적NodeList를 반환한다.

NodeList는 Array는  아니지만, 숫자 인덱스와 length property를 가지고 있는 Node의 콜렉션이다.

 

● forEach메서드를 사용해서 querySelectorAll 반환값에 이벤트를 적용하는 방법.

vary.forEach((element) => {
	element.addEventListener('click', (e) => {
    	//함수내용
    }
}

여기서 element는 querySelectorAll로 선택된 NodeList의 요소 하나하나를 의미한다.