[Vanilla JS] 여러개의 요소에 AddEventListener 넣기

$('.an-article img').click(callback);

요소에 클릭 이벤트를 등록한다.

jQuery로 했었다면 엄청나게 간단한 코드였을 것이

const articleImgs = document.querySelectorAll('.an-article img');

바닐라 JS로 .an-article 안의 img 요소를 선택하는 것까지만 해도 코드가 더 길어진다.

이제 각 img에 클릭 이벤트를 줘야 한다.

articleImgs.addEventListener 로 바로 하면 안 된다.

forEach문을 사용하여 img 각각에 click 이벤트를 등록해야 한다!

articleImgs.forEach(function(articleImg) {
	articleImg.addEventListener("click", callback);
});

코드를 좀 더 간결하게 하기 위해 forEach 안에 arrow fuction을 사용하자.

articleImgs.forEach(articleImg => {
	articleImg.addEventListener("click", callback);
});

Vanilla JS. AddEventListener, querySelector and closest

List of some native Javascript functions to manipulate the DOM

latteandcode.medium.com

Array.prototype.forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

developer.mozilla.org

고양이발