jQuery의 이벤트 바인딩에 대한 몇 가지 생각(보충)

먼저 다음과 같은 매우 일반적인 이벤트 바인딩 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

 
//예 
$('#dom').click(function(e){ 
//무언가 
}) 

$(' #dom2 ').click(function(e){ 
//뭔가 
}); 

이 코드에는 이벤트 바인딩 처리에 몇 가지 결함이 있습니다.

과도한 이벤트 바인딩은 메모리를 소모합니다
나중에 생성된 HTML에는 이벤트 바인딩이 없으므로 다시 바인딩해야 합니다
구문이 너무 복잡합니다

해결 방법

1번과 2번에 대한 해결 방법으로 먼저 jQuery의 이벤트 바인딩에 대해 알아 보겠습니다.

jQuery의 이벤트 바인딩에는 호출할 수 있는 여러 메서드가 있습니다. 클릭 이벤트를 예로 들어 보겠습니다.

click 메소드

bind 메소드
delegate 메소드
on 메소드

어떤 메소드를 사용하든(클릭/바인드/위임) 결국 jQuery의 하위 레이어는 항상 on을 호출합니다. 최종 이벤트 바인딩을 완료하는 방법입니다. 그러므로 어떤 관점에서는 글쓰기의 편리성과 습관을 바탕으로 선택하는 것 외에 행복하고 직접적으로 on 방식을 직접 사용하는 것이 더 좋습니다.

메서드에 대한 자세한 설명과 사용 사례는 jQuery 공식 홈페이지를 직접 방문하시기 바랍니다. 여기서는 하나씩 설명하지 않겠습니다. api.jquery.com

성능

먼저 다양한 이벤트 바인딩 방법 간의 메모리 사용량 격차를 명확하게 이해해야 합니다.

성능 분석에는 Chrome의 개발자 도구를 사용합니다.
프로필 --> 힙 스냅샷을 찍습니다. 이 도구를 사용하면 Javascript가 차지하는 메모리를 확인하고 성능 문제를 분석할 수 있습니다.

DEMO HTML

코드 복사 코드는 다음과 같습니다.

jQuery의 이벤트 바인딩에 대한 몇 가지 생각(보충)_jquery