JavaScript에서 Event Delegation 메서드를 사용하는 방법, 이유, 사용 방법에 대해 알아보세요.
JavaScript 이벤트 위임이란 무엇이며 언제 사용해야 합니까?
간단히 말해 이벤트 위임은 단일 이벤트 리스너, 부모 요소 이벤트 위임을 사용하면 everychild 요소에 이벤트 핸들러를 추가하지 않아도 되지만 여전히 찾고 조작할 수 있습니다.
이것이 왜 강력한지 잠시 후에 알게 될 것입니다.
목록 안에 항목 목록이 있다고 가정합니다. 사용자가 목록 항목 중 하나를 클릭하면 어떤 일이 일어나기를 원합니다.
두 가지 다른 방법을 확인해 보겠습니다.
각 요소에 이벤트 리스너 연결
목록의 개별 요소 항목에 액세스하는 일반적인 방법은 항목을 반복하는 것입니다. for 사용 고리. 그런 다음 각 요소에 이벤트 리스너를 연결합니다.
let allExerciseItems = document.querySelectorAll(".exercise-item")
for (let exerciseItem of allExerciseItems) {
exerciseItem.addEventListener("click", function(event) {
// Do something with target child element
event.target.classList.toggle("exercise-complete")
});
}예시
https://codepen.io/StrengthandFreedom/pen/KBZezV/
이벤트 위임으로 항목에 액세스
이벤트 위임은 위에서 본 for 루프 예제와 완전히 다릅니다. 액세스하려는 각 요소를 반복(루핑)하는 대신 다음과 같이 단순히 상위 요소를 대상으로 지정합니다.
// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
if(event.target.classList.contains('exercise-item')) {
// Do something with target child element
event.target.classList.toggle('exercise-complete')
}
})
CodePen example.참고:classList.contains 대신 element.matches API matches()를 사용할 수 있습니다. 선택자의 유연성이 더 필요한 경우
보시다시피 결과는 완전히 동일합니다. 여기에서 운동 요소 항목 중 하나를 클릭하면 exercise-complete가 토글됩니다. 수업. 다른 점은 이 결과를 얻기 위해 사용한 방법입니다.
그렇다면 이벤트 처리 + for 루프 방식 대신에 이벤트 위임 방식을 사용해야 하는 이유는 무엇입니까?
다음에 논의합시다!
이벤트 위임 및 성능
하루, 시간 또는 분당 수백 또는 수천 개의 동적으로 생성되는 요소가 있는 웹 애플리케이션을 처리한다고 상상해 보십시오. 호텔 예약을 위한 예약 캘린더를 예로 들 수 있습니다. 또는 최적의 사용자 경험을 제공하기 위해 자주 라이브 업데이트가 필요한 Twitter와 같은 소셜 미디어 플랫폼입니다.
웹 UI의 모든 요소에 이벤트 리스너가 연결되어 있는 경우 이러한 유형의 시나리오는 빠르게 하드웨어를 많이 사용하게 될 수 있습니다.
이러한 모든 이벤트 리스너는 사용자 CPU를 차지할 수 있습니다. 메모리에 있는 엄청난 양의 함수 참조를 유발할 수 있습니다. 이로 인해 메모리 누수 및 전반적인 성능 저하가 발생할 수 있습니다.
GC(가비지 컬렉션)에 대해 잘 모릅니다. 나는 JavaScript(고급 프로그래밍 언어)만을 작성하는 호사를 누렸습니다. 그러나 내가 아는 한 가지는 다양한 공급업체 브라우저(Chrome, FireFox 등)로 인해 브라우저의 GC를 예측할 수 없다는 것입니다. 물론 수많은 장치(스마트폰, 노트북 등)도 마찬가지입니다.
쓰레기 수집
간단히 말해 가비지 컬렉션은 일종의 컴퓨터 메모리 관리입니다. 가비지 컬렉터는 컴퓨터 메모리에 있는 오래되거나 사용되지 않는 코드를 제거하려고 시도합니다. 다양한 프로그래밍 언어와 시스템을 위한 수많은 가비지 수집기가 있습니다.
루프 예제에서 본 것처럼 모든 것에 이벤트 리스너를 연결하면 웹 앱에 필요한 가비지 수집 양이 증가합니다. 이렇게 하면 거의 항상 성능이 저하됩니다.
일반적으로 단일이 있을 때 성능이 더 좋습니다. 모든 단일 하위 요소에 이벤트 리스너를 연결하는 것보다 하위 요소에 대한 모든 클릭을 수신 대기하는 상위 요소의 이벤트 리스너