코딩이 즐겁다

[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드 본문

Jquery

[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드

코즐 2025. 3. 8. 13:36
반응형

 

 

jQuery의 click 이벤트는 사용자가 요소를 클릭했을 때 실행되는 이벤트입니다. 클릭 이벤트를 활용하면 버튼, 링크, 이미지 등 다양한 요소에 대한 사용자 인터랙션을 쉽게 구현할 수 있습니다.

 

 

기본 사용법

$(selector).click(function() {
    // 실행할 코드
});

✅ 버튼 클릭 시 알림창 띄우는 예제 코드:

$("#btn").click(function() {
    alert("버튼이 클릭되었습니다!");
});

 

 

on() 메서드를 사용한 이벤트 바인딩

동적으로 생성된 요소에도 이벤트를 적용하려면 .on() 메서드를 사용해야 합니다.

$(parentSelector).on("click", childSelector, function() {
    // 실행할 코드
});

✅ 동적으로 생성된 버튼에 클릭 이벤트 적용하는 예제 코드:

$(document).on("click", ".dynamic-btn", function() {
    alert("동적으로 생성된 버튼이 클릭되었습니다!");
});

 

 

클릭 이벤트 제거 (off())

등록한 click 이벤트를 제거하려면 .off("click")을 사용해야 합니다.

$(selector).off("click");

✅ 버튼 클릭 이벤트 제거하는 예제 코드:

$("#btn").off("click");

 

 

기본 동작 막기 (preventDefault())

preventDefault()는 <a> 태그처럼 기본적으로 수행되는 동작을 막고 싶을 때 사용합니다.

$("a").click(function(event) {
    event.preventDefault(); // 링크 이동 방지
    alert("링크 클릭이 방지되었습니다!");
});

 

 

이벤트 전파 막기 (stopPropagation())

stopPropagation()은 클릭 이벤트가 부모 요소로 전파되는 걸 막아주는 기능을 합니다.

$(".child").click(function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
    alert("자식 요소 클릭!");
});
$(".parent").click(function() {
    alert("부모 요소 클릭!");
});

✅ stopPropagation() 이해를 돕는 예제 코드:

<!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() {
		$(".child").click(function(event) {
		    //event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
		    alert("자식 요소 클릭!");
		});

		$(".parent").click(function() {
		    alert("부모 요소 클릭!");
		});
	});
  </script>
</head>
<body>
	<div class="parent" style="width: 200px;height: 200px;background-color:red;">
		<div class="child" style="width: 100px;height: 100px;background-color:blue;"></div>
	</div>
</body>
</html>

🎯 실행 결과:

stopPropagation() 메서드 이해를 돕는 출력 예제
stopPropagation() 메서드 이해를 돕는 출력 예제

위의 예제 코드를 실행하면 부모 요소인 빨간 영역 안에 파란 영역 자식 요소가 포함 되어 있는 형태로 출력이 됩니다.

예를 들어, 빨간색 부분을 클릭하게 되면 부모 영역의 클릭 이벤트만 실행되겠지만 파란색을 클릭하게 되면 자식 영역의 클릭 이벤트가 실행되고 이어서 부모 영역 클릭 이벤트도 실행됩니다. 따라서 부모 영역의 클릭 이벤트는 실행하지 않고 자식 영역의 클릭 이벤트 내용만 실행하고 싶은 경우에 stopPropagation() 메서드를 사용하시면 됩니다.

즉, stopPropagation()을 사용하면 .child를 클릭해도 .parent의 이벤트는 실행되지 않습니다.

 

 

this 키워드 활용하기

this를 사용하면 클릭된 요소 자신을 가리킬 수 있습니다.

$(".item").click(function() {
    $(this).css("background-color", "yellow");
});

위의 코드는 .item을 클릭하면 해당 요소의 배경색이 노란색으로 변경됩니다.

 

클릭 이벤트 한 번만 실행하기 (one())

클릭 이벤트를 한 번만 실행하고 싶으면 .one() 메서드를 사용하면 됩니다.

$("#btn").one("click", function() {
    alert("이 버튼은 한 번만 클릭할 수 있습니다!");
});

이 버튼을 클릭하면 한 번만 실행되고 이후에는 클릭해도 반응하지 않습니다.

 

.click() 메서드를 사용하여 강제 클릭

클릭 이벤트를 강제로 실행하고 싶을 때 .click()을 호출할 수 있습니다.

$("#btn").click();

이렇게 하면 #btn이 실제로 클릭되지 않아도 클릭 이벤트가 실행됩니다.

 

반응형
저작자표시 비영리 변경금지

'Jquery' 카테고리의 다른 글

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드  (13) 2025.03.10
[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드  (15) 2025.03.10
[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드  (18) 2025.03.09
jquery 란, 제이쿼리 사용 방법 갓벽 가이드  (55) 2025.02.27
'Jquery' Related Articles more