jQuery에서는 각 요소에 대해 반복 작업을 수행하거나 이벤트를 위임하는 데 사용할 수 있는 each 메소드와 이벤트 위임에 대해 알아보겠습니다.

jQuery each 메소드

each 메소드는 jQuery 객체 또는 선택된 요소 집합에 대해 각 요소에 대해 반복 작업을 수행할 수 있는 메소드입니다. each 메소드는 일반적으로 배열 또는 개체를 반복 작업하거나 특정 작업을 수행할 때 사용됩니다.

예를 들어, 다음은 각 요소의 텍스트를 콘솔에 출력하는 간단한 예제입니다.

$("li").each(function() {
  console.log($(this).text());
});

이 예제에서 each 메소드는 선택된 li 요소 각각에 대해 콘솔에 텍스트를 출력합니다.

이벤트 위임

이벤트 위임은 특정 요소에 이벤트를 직접 바인딩하는 대신 해당 요소의 부모나 조상 요소에 이벤트를 바인딩하여 해당 요소의 하위 요소에서 이벤트를 처리하는 방법입니다. 이로써 동적으로 추가되거나 변경되는 요소에 대한 이벤트 처리를 간편하게 할 수 있습니다.

예를 들어, 다음은 ul 요소 내의 각 li 요소에 대한 클릭 이벤트를 위임하는 예제입니다.

$("ul").on("click", "li", function() {
  // 클릭된 li 요소에 대한 작업 수행
});

이 예제에서 on 메소드를 사용하여 ul 요소에 클릭 이벤트를 바인딩하고, 두 번째 매개변수에는 이벤트를 위임할 대상인 li를 지정합니다.

요약하면, each 메소드를 사용하여 요소를 반복 작업하고, 이벤트 위임을 통해 효율적으로 이벤트를 처리할 수 있습니다. jQuery를 사용하는 웹 개발에서 이러한 메소드와 기술을 잘 활용하여 코드를 더욱 효율적으로 작성할 수 있습니다.

References:

• https://api.jquery.com/each/
• https://learn.jquery.com/events/event-delegation/