32일차[jQuery 이벤트 함수 / 애니메이션]

진하의 메모장·2025년 2월 20일

공부일기

목록 보기

38/66

2025 / 02 / 20

오늘 수업 시간에는 jQuery 이벤트 함수와 애니메이션을 배웠습니다.
매번 CSS로 애니메이션을 처리하던 저로써는 조금 신기하기도 했습니다.
이벤트 함수와 애니메이션에 대해 제가 이해한 내용을 바탕으로 포스팅하겠습니다.

💌 jQuery 이벤트 함수

이벤트 처리

웹 페이지에서 사용자의 동작을 감지하고, 반응을 하게 만드는 것을 의미합니다.

1. click 이벤트

click 이벤트는 사용자가 버튼이나 링크 등을 클릭했을 때 발생합니다.

jQuery에서는 on( ) 메서드를 사용해 이벤트를 처리할 수 있습니다.

$("#btnClick").on("click", () => {
   alert("버튼이 클릭되었습니다.");
});

"눌러보세요" 버튼을 클릭하면 "버튼이 클릭되었습니다."라는 알림이 뜹니다.

2. dblclick 이벤트

dblclick 이벤트는 사용자가 요소를 더블 클릭했을 때 발생합니다.

마우스를 두 번 클릭한 동작을 감지할 수 있습니다.

$("#btnDblClick").on("dblclick", () => {
   alert("더블 클릭되었습니다.");
});

"더블클릭해보세요" 버튼을 더블 클릭했을 때 "더블 클릭되었습니다."라는 알림을 띄웁니다.

3. keyup 이벤트

keyup 이벤트는 사용자가 키보드에서 키를 눌렀다가 땔 때 발생합니다.

입력창에서 사용자의 입력을 실시간으로 감지할 때 유용합니다.

$("#inputKeyup").on("keyup", function() {
   const inputValue = $(this).val();
   $("#resultKeyup").text(inputValue);
});

입력창에 키를 입력할 때마다 입력된 값을 실시간으로 아래 <span> 태그에 표시합니다.

4. change 이벤트

사용자가 입력값을 변경한 후, 해당 요소에서 포커스를 읽었을 때 발생합니다.

주로 <select>, <input>, <textarea> 등의 요소에서 사용됩니다.

$("#selectChange").on("change", function () {
   const selectedValue = $(this).val();
   alert("선택한 내용 : " + selectedValue);
});

드롭다운 메뉴에서 과일을 선택했을 때, 선택한 과일을 알림으로 띄워줍니다.

5. focus & blur 이벤트

focus 이벤트는 입력 요소에 포커스가 갔을 때 발생합니다.

blur 이벤트는 포커스가 벗어났을 때 발생합니다.

주로 사용자 경험을 개선하기 위한 스타일링이나 동작에 사용됩니다.

$("#inputFocusBlur").on("focus", function () {
   $(this).css("background-color", "lightblue");
});

$("#inputFocusBlur").on("blur", function () {
   $(this).css("background-color", "");
});

입력창에 포커스가 갔을 때 배경색을 파란색으로 변경하고, 포커스가 벗어났을 때 배경색을 원래대로 돌려줍니다.

6. submit 이벤트

submit 이벤트는 사용자가 폼을 제출할 때 발생합니다.

폼이 제출될 때 페이지가 새로 고침되는 기본 동작을 막고, 추가적인 처리를 할 수 있습니다.

$("#formSubmit").on("submit", function (e) {
   e.preventDefault(); // 기본 폼 제출 동작 방지
   const input_value = $("#inputSubmit").val();
   alert("전송되었습니다. 값 : " + input_value);
   $("#inputSubmit").val(""); // 입력값 초기화
});

폼을 제출할 때 페이지 새로 고침을 방지하고, 입력된 값을 알림으로 표시합니다.
제출 후에는 입력값이 비어집니다.

💌 이벤트 버블링

이벤트가 발생한 요소에서 부모 요소로 전판되는 현상입나디.

이벤트 버블링을 방지하기 위해서는 stopPropagation( ) 메서드를 사용할 수 있습니다.

$("#outer").on("click", () => {
   alert("outer 클릭");
});

$("#middle").on("click", (e) => {
   alert("middle 클릭");
   e.stopPropagation(); // 부모 요소로 전파되지 않도록 막음
});

$("#inner").on("click", (e) => {
   alert("inner 클릭");
   e.stopPropagation();
});

inner를 클릭했을 때 "inner 클릭"이 뜨고, stopPropagation( )이 적용되어 middle과 outer로 이벤트가 전파되지 않습니다.

💌 jQuery 애니메이션

웹 페이지에서 애니메이션을 사용하면 사용자 경험을 향상시킬 수 있습니다.

jQuery를 사용하면 다양한 애니메이션 효과를 간단하게 적용할 수 있습니다.

1. Visibility

show( ), hide( ), toggle( )

요소를 보이거나 숨길 때 사용합니다.

애니메이션 효과를 주어 요소가 서서히 나타나거나 사라지게 할 수 있습니다.

show( )

요소를 서서히 보이게 합니다.

hide( )

요소를 서서히 숨깁니다.

toggle( )

요소의 상태를 전환합니다.

보이면 숨기고, 숨겨지면 보이게 됩니다.

$("#btnShow").on("click", () => {
   $("#boxToggle").show(500); // 0.5초 동안 요소를 보이게 합니다.
});

$("#btnHide").on("click", () => {
   $("#boxToggle").hide(500); // 0.5초 동안 요소를 숨깁니다.
});

$("#btnToggle").on("click", () => {
   $("#boxToggle").toggle(500); // 요소의 보임/숨김 상태를 전환합니다.
});

버튼을 클릭할 때마다 #boxToggle 요소를 서서히 보이거나 숨기고, 전환할 수 있게 합니다.

2. Fade

fadeIn( ), fadeOut( ), fadeToggle( ), fadeTo( )

fade 계열 메서드는 요소의 투명도를 조절하여 서서히 나타나거나 사라지는 효과를 만듭니다.

fadeIn( )

요소를 서서히 나타나게 합니다.

fadeOut( )

요소를 서서히 사라지게 합니다.

fadeToggle( )

요소를 나타나거나 사라지게 합니다.

fadeTo( )

요소의 투명도를 특정 값으로 변경합니다.

$("#btnFadeIn").on("click", () => {
   $("#boxFade").fadeIn(1000); // 1초 동안 요소가 서서히 나타납니다.
});

$("#btnFadeOut").on("click", () => {
   $("#boxFade").fadeOut(1000); // 1초 동안 요소가 서서히 사라집니다.
});

$("#btnFadeToggle").on("click", () => {
   $("#boxFade").fadeToggle(1000); // 상태에 따라 나타나거나 사라집니다.
});

$("#btnFadeTo").on("click", () => {
   $("#boxFade").fadeTo(1000, 0.5); // 1초 동안 투명도를 50%로 변경합니다.
});

버튼을 클릭할 때마다 #boxFade 요소가 서서히 나타나거나 사라지거나, 투명도를 변화시킬 수 있습니다.

3. Slide

slideDown( ), slideUp( ), slideToggle( )

slide 계열 메서드는 요소가 위에서 아래로 또는 아래에서 위로 슬라이드하는 효과를 만듭니다.

이 효과는 주로 메뉴가 펼쳐지거나 접힐 때 사용됩니다.

slideDown( )

요소를 아래로 펼칩니다.

slideUp( )

요소를 위로 접습니다.

slideToggle( )

요소의 펼침/접힘 상태를 전환합니다.

$("#btnSlideDown").on("click", () => {
   $("#boxSlide").slideDown(500); // 0.5초 동안 요소가 아래로 펼쳐집니다.
});

$("#btnSlideUp").on("click", () => {
   $("#boxSlide").slideUp(500); // 0.5초 동안 요소가 위로 접힙니다.
});

$("#btnSlideToggle").on("click", () => {
   $("#boxSlide").slideToggle(500); // 상태에 따라 펼쳐지거나 접힙니다.
});

버튼을 클릭할 때마다 #boxSlide 요소가 슬라이드되면서 나타나거나 사라지게 합니다.

4. animate( )

slideDown( ), slideUp( ), slideToggle( )

animate( ) 메서드는 CSS 속성을 직접 애니메이션화할 수 있는 기능을 제공합니다.

요소의 위치나 크기, 색상 등 여러 속성을 애니메이션으로 변화시킬 수 있습니다.

$("#btnAnimate").on("click", () => {
   $("#moveBox").animate({ left: "+=100px" }, 500); 
  // 0.5초 동안 박스를 오른쪽으로 100px 이동시킵니다.
});

#moveBox 요소가 오른쪽으로 100px 이동하는 애니메이션을 실행합니다.

5. stop( )

slideDown( ), slideUp( ), slideToggle( )

stop() 메서드는 현재 실행 중인 애니메이션을 중단시키는 기능을 제공합니다.

이 메서드는 애니메이션이 여러 번 중첩될 때 유용합니다.

$("#btnMoveAgain").on("click", () => {
   $("#stopBox").animate({ left: "300px", height: "150px", width: "150px" }, 2000); // 2초 동안 애니메이션
});

$("#btnStop").on("click", () => {
   $("#stopBox").stop(); // 애니메이션을 즉시 중단합니다.
});

#stopBox 요소가 2초 동안 애니메이션을 실행하는데, "Stop" 버튼을 클릭하면 애니메이션이 중단됩니다.

32일차 후기

자바스크립트가 어렵다고 느껴지기도 했어서 매번 CSS로 애니메이션을 구현했는데.. 생각보다 어렵지 않았고, 제이쿼리로는 두 줄 정도로 끝나니까.. 좀 허무했습니다.

그래도 뭔가.. CSS가 정이 가서 그런지 좋은 것 같습니다.

시간이 남으면 CSS로 하고 급하면 제이쿼리로 해야겠습니다!! (｡˃ ᵕ ˂ )b

CSS 애니메이션 부분을 공부했어서 그런지 딱히 어려운 점은 없습니다!

여러가지 애니메이션이 적용된 홈페이지를 만들어 보고 싶습니다. ദ്ദി ´ᵕ｀๑)و♡