728x90
반응형
728x90
목 차
반응형
1. $(document).on()
- $(document).on() 메서드는 jQuery에서 이벤트 핸들러를 동적으로 등록하거나 위임할 때 사용되는 강력한 메서드입니다.
- on() 메서드는 특정 이벤트가 발생했을 때 실행할 함수를 지정합니다.
- 이벤트를 직접 요소에 바인딩하거나, 이벤트 위임을 사용하여 동적으로 생성된 요소에도 이벤트를 적용할 수 있습니다.
- 기존의 bind(), delegate(), live() 메서드를 대체하며, 최신 jQuery에서는 on()을 권장합니다.
2. 문법
$(selector).on(event, [childSelector], [data], function)| 매개변수 | 설명 |
| event | 발생할 이벤트 유형 (예: "click", "mouseover", "keydown" 등). 여러 이벤트를 쉼표로 연결 가능. |
| childSelector | (선택 사항) 이벤트를 위임할 하위 요소의 선택자. |
| data | (선택 사항) 이벤트 핸들러에 전달할 데이터. |
| function | 이벤트가 발생했을 때 실행될 콜백 함수. |
3. 사용 예제
3-1. 기본 이벤트 바인딩
- on()을 사용하여 특정 이벤트를 특정 요소에 바인딩할 수 있습니다.
$("button").on("click", function() {
alert("Button clicked!");
});
3-2. 이벤트 위임
- 동적으로 생성된 요소에도 이벤트를 적용할 수 있습니다.
- 이벤트는 부모 요소에 바인딩하고, 자식 요소에서 이벤트가 발생했을 때 처리합니다.
$(document).on("click", ".dynamic-button", function() {
alert("Dynamic button clicked!");
});- 여기서 .dynamic-button은 동적으로 생성된 요소를 포함합니다.
- 이벤트 위임은 성능상 이점이 있습니다. (많은 요소에 직접 이벤트를 바인딩할 필요가 없음)
3-3. 여러 이벤트 바인딩
- 여러 이벤트를 한 번에 바인딩할 수 있습니다.
$("input").on("focus blur", function(event) {
if (event.type === "focus") {
$(this).css("background-color", "yellow");
} else {
$(this).css("background-color", "");
}
});
3-4. 이벤트 핸들러에 데이터 전달
- 추가 데이터를 이벤트 핸들러에 전달할 수 있습니다.
$("button").on("click", { message: "Hello, World!" }, function(event) {
alert(event.data.message);
});
3-5. 추가된 동적 리스트에 이벤트 바인딩
- 동적으로 추가된 리스트 항목 클릭 이벤트 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$(document).on("click", ".list-item", function() {
alert("List item clicked!");
});
// 동적 리스트 추가
$("#add-item").on("click", function() {
$("#list").append('<li class="list-item">New Item</li>');
});
});
</script>
</head>
<body>
<button id='add-item'>추가하기</button>
<ul id="list">
</ul>
</body>
</html>
3-6. 이벤트 해제
- 등록된 이벤트 핸들러를 제거하려면 off()를 사용합니다.
$("button").on("click", function() {
alert("This will no longer work after off() is called.");
});
// 이벤트 제거
$("button").off("click");
3-7. 특정 요소에 이벤트 제한
- 특정 클래스가 있는 경우에만 이벤트 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$(document).on("click", "div", function(event) {
if ($(this).hasClass("active")) {
alert("Active div clicked!");
}
});
});
</script>
</head>
<body>
<div class="active">클릭시 경고창 있음</div>
<div>클릭시 경고창 없음</div>
</body>
</html>
3-8. 이벤트 버블링 막기
- preventDefault()와 stopPropagation()을 조합하여 기본 동작과 이벤트 버블링을 막을 수 있습니다.
$(document).on("click", "a", function(event) {
event.preventDefault(); // 기본 링크 이동 동작 막기
alert("Link click prevented!");
});
4. on() 과 기존 메서드 비교
| 메서드 | 설명 | 권장여부 |
| bind() | 요소에 직접 이벤트 바인딩. 최신 jQuery에서는 사용되지 않음. | 사용하지 않음 |
| live() | 이벤트 위임을 처리했지만, 성능 문제로 제거됨. | 사용하지 않음 |
| delegate() | 특정 부모 요소에 이벤트 위임. on()으로 통합됨. | 사용하지 않음 |
| on() | 모든 이벤트 바인딩 및 위임 작업을 처리하는 최신 메서드. | 사용 권장 |
728x90
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jquery] 제이쿼리를 사용하여 name으로 값 가져오기 (125) | 2024.12.09 |
|---|---|
| [jquery] 제이쿼리를 사용하여 id 값 가져오기 (71) | 2024.12.08 |
| [jquery] click() 메서드와 on("click") 메서드의 차이 (63) | 2024.12.02 |
| jQuery 페이지 로드 후 실행 이벤트 (45) | 2024.12.02 |
| 제이쿼리 선택자 정리 (Selector) (0) | 2024.12.01 |