jQuery - click()이 동작하지 않으면 on()을 사용해보자
- 프로그래밍/제이쿼리
- 2022. 2. 25.
jQuery 라이브러리를 사용하게 되면 많이 이용하는 메서드가 바로 click()이나 change() 같은 이벤트를 다룰 때 사용하는 이벤트 핸들러 메서드입니다. 그런데 click(), change() 같은 이벤트 핸들러가 잘 동작하다가 특정 상황에서 동작하지 않는지 이유를 알고 계신가요? 그리고 click()나 change()가 동작하지 않을 때 on()을 사용하면 문제가 해결되는 걸까요? 오늘은 on()과 click()의 차이 그리고 그 차이점을 통해서 click() 대신 on()을 써야 하는지 알아보겠습니다.
click()이 동작하지 않으면 on()을 쓰자
click()와 on()의 차이점을 알아보기 전에 click() 이벤트 핸들러가 정상적으로 동작하지 않는 경우 on()을 사용해서 이벤트를 처리하는 방법에 대해서 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>click sample</title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
<button>add Button</button>
<script>
$(function() {
$('button').click(function() {
alert('버튼을 추가합니다.');
$('body').append('<button>add Button</button>');
});
});
</script>
</body>
</html>이 예제 코드는 click()을 이용해 <button>을 추가하는 코드입니다. 제이쿼리의 click()을 이용해 <button>의 클릭 이벤트를 처리하도록 만들었습니다. 코드를 실행시켜서 확인해보면 처음에 만들어져 있는 <button>은 정상적으로 <button>을 추가합니다. 하지만 새롭게 추가된 <button>은 새로운 <button>을 추가하지 못합니다. 우리는 모든 <button>이 <button>을 추가할 수 있을 거라고 생각하고 click()을 사용해 이벤트를 처리했는데 왜 동작하지 않는 걸까요?
$(document).on('click', 'button', function() {
alert('버튼을 추가합니다.');
$('body').append('<button>add Button</button>');
});이 문제를 해결하는 방법은 위와 같이 click() 대신 on()을 사용하면 됩니다. 한번 실행해보세요. on()을 사용하게 되면 모든 <button>이 새로운 <button>을 추가할 수 있게 됩니다.
왜 click()은 새롭게 추가되는 DOM 요소에서 동작하지 않았을까?
앞서 살펴본 예제 코드에서 click()을 사용해 이벤트를 처리하면 왜 새롭게 추가된 Element 요소에는 동일한 이벤트 처리가 추가되지 않은 걸까요? click()과 on()의 정의가 다른 걸까요?
jQuery 공식 홈페이지를 보면 click()은 on('click', handler)을 축약시켜 쓰는 shortcut라고 이야기합니다. 결국 click()과 on() 다르지 않다는 이야기입니다. 그러면 왜 차이가 발생하는 것일까요? on()과 click()의 차이점은 '선택자'의 유무입니다.
맨 처음에 보았던 click()는 on()으로 표현하면 다음과 같이 표현할 수 있어요.
// click()
$('button').click(function() {
alert('버튼을 추가합니다.');
$('body').append('<button>add Button</button>');
});
// on()
$('button').on('click', '', function() {
alert('버튼을 추가합니다.');
$('body').append('<button>add Button</button>');
});앞서 해결책으로 만들었던 on()과는 형태와 다릅니다. 해결책으로 제시한 on()은 <body>의 <button>을 이벤트 처리 대상으로 바라보았지만 click()을 단순히 on()으로 바꾸어보면 이벤트 처리 대상이 단순히 <button>이에요.
즉 on()은 click()과 달리 이벤트를 처리하는 대상을 지정함으로써 새로운 요소가 추가되어도 다시 이벤트 핸들러를 등록하는 작업 없이 이벤트 핸들러가 동작할 수 있는 조건(선택자)을 가집니다.
그리고 선택자 유무로 인한 차이점은 한 가지가 더 있어요. click()의 경우 일치하는 요소마다 핸들러를 만들어내는 반면 on()의 경우 하나의 핸들러를 통해 모든 이벤트를 처리하는 차이점도 있습니다. 더군다나 on()을 사용하면 네임스페이스를 이용해 필요에 따라 이벤트를 관리하기도 용이해요.
본문에서 사용한 코드는 첨부파일로 제공하니 필요하신 분은 아래의 링크를 이용해 다운로드하세요.
'프로그래밍 > 제이쿼리' 카테고리의 다른 글
| jQuery - 속성을 판별하는 hasAttr() 함수는 없다 (0) | 2023.06.19 |
|---|---|
| jQuery - CDN을 이용해서 제이쿼리를 사용해볼까? (0) | 2022.02.13 |
| jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자 (1) | 2021.12.20 |
| jQuery - $(document).ready() 대신 $()를 사용하자 (6) | 2021.05.13 |
| jQuery - 제이쿼리란? (5) | 2021.03.30 |