Intro
안녕하세요! Plitche(플리체)입니다. :P
스크립트를 작성하다보면, 대부분의 개발자 분들이 겪는 의문이라고 생각합니다. 저는 그 차이를 모르고 사용했다가 간단한 문제를 해결하지 못했던 경험이 있어서 이 차이에 대해 설명 드리려 합니다.
.click과 .on('click')는 jQuery에서 버튼 클릭 이벤트를 처리하는 두 가지 다른 방법입니다.
예시
먼저 두가지 버튼 클릭 이벤트에 대해 간단한 코드를 예시로 설명 드리도록 하겠습니다.
1. HTML
<body>
<button class="btn">Button 1</button>
<div id="container">
<button class="btn">Button 2</button>
</div>
</body>
2. .click 예시
$('body button').click(function() {
alert('Hello World');
})3. .on('click') 예시
$('body').on('click', 'button', function() {
alert('Hello World')
})두 코드 모두 <body> 태그의 <button> 태그를 클릭 했을때 'Hello World' 알럿창이 뜨는 클릭 이벤트를 발생시킵니다.
1. $().click(function(){})
- 직접적으로 버튼 요소를 선택하여 클릭 이벤트를 처리하는 방법입니다.
이 코드는 페이지가 로드된 후에 존재하는 모든 버튼 요소에 클릭 이벤트 핸들러를 바로 연결합니다.
이렇게 하면 모든 버튼에 대해 이벤트 핸들러가 개별적으로 설정되며, 이벤트 핸들러는 버튼 요소가 동적으로 추가되거나 제거되어도 영향을 받지 않습니다.
즉, 페이지 로드 후에 추가되는 버튼에는 이벤트 핸들러가 자동으로 적용되지 않습니다.
2. $().on('click', '', function(){})
- 이벤트 위임(Event delegation)을 사용하여 버튼 클릭 이벤트를 처리하는 방법입니다. 이 코드는 body 요소에 클릭 이벤트 핸들러를 설정하고, 이벤트가 버튼에서 발생했을 때 처리합니다. 이벤트 위임을 사용하면 페이지가 로드된 후에 동적으로 추가되는 버튼에도 이벤트 핸들러가 적용됩니다.
- 새로운 버튼 요소가 추가되거나 제거될 때마다 이벤트 핸들러를 개별적으로 설정할 필요가 없다는 장점이 있습니다.
- 동적으로 생성되는 요소에 대한 이벤트 처리에 유용합니다. 예를 들어, Ajax를 통해 데이터를 가져와서 동적으로 버튼을 추가할 때나, 리스트나 테이블과 같은 컨테이너 요소 안에 있는 버튼들에 대한 이벤트 처리에 용이합니다.
이벤트 위임은 jQuery에서 이벤트 처리를 최적화하고 성능을 향상시키는 데 도움을 주는 중요한 개념입니다.
만약 $('body button').click(function() {})와 같은 방식으로 모든 버튼에 이벤트 핸들러를 개별적으로 설정하면, 페이지에 많은 수의 버튼이 있을 경우 이벤트 핸들러의 수가 증가하고 메모리 사용량도 늘어날 수 있습니다. 하지만 이벤트 위임을 사용하면, 버튼의 부모 요소에 하나의 이벤트 핸들러만 설정하므로 메모리 사용량을 줄일 수 있습니다.
정리
- $('body button').click(function() {}):
페이지에 있는 모든 버튼 요소에 대해 개별적인 이벤트 핸들러를 설정합니다. 이벤트 핸들러는 페이지 로드 시에 실행되며, 동적으로 추가되는 버튼에는 적용되지 않습니다. - $('body').on('click', 'button', function() {}):
버튼 클릭 이벤트를 body 요소에 설정하고, 이벤트가 버튼에서 발생한 경우에만 동작합니다. 이벤트 위임을 사용하므로 동적으로 추가되는 버튼에도 이벤트 핸들러가 자동으로 적용됩니다. - $('body button').click(function() {})는 페이지 로드 후에 존재하는 모든 버튼에 개별적으로 이벤트 핸들러를 설정하는 방식이며, $('body').on('click', 'button', function() {})는 이벤트 위임을 사용하여 버튼 클릭 이벤트를 부모 요소에 설정하는 방식입니다. 이벤트 위임은 동적으로 생성되는 요소에 대한 이벤트 처리를 용이하게 하며, 메모리 사용량을 줄여 성능을 향상시킬 수 있습니다.
'Javascript' 카테고리의 다른 글
| [jQuery] 선택자 종류와 간단 예시 (0) | 2023.06.01 |
|---|