[jQuery] 이벤트 핸들링과 애니메이션

이벤트 핸들링(Event Handling)

이벤트 핸들링은 웹 페이지에서 사용자의 동작에 대응하여 원하는 동작을 실행하는 기능을 말합니다. 사용자가 웹 페이지에서 클릭, 키보드 입력, 마우스 움직임 등의 동작을 하면, 이벤트가 발생하고 해당 이벤트에 등록한 이벤트 핸들러가 실행됩니다.

이벤트 리스너 등록

<button id="myButton">Click me</button>

// 이벤트 리스너 등록
let button = document.getElementById('myButton');

function handleClick() {
    console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

이벤트 핸들러 함수
이벤트 핸들러 함수는 이벤트가 발생했을 때 실행되는 함수를 의미합니다. 이 함수는 이벤트 객체를 매개변수로 받아서 이벤트 정보를 활용할 수 있습니다.

let button = document.getElementById('myButton');

function handleClick(event) {
    console.log('Button clicked!');
    console.log('이벤트 정보:', event);
}

button.addEventListener('click', handleClick);

이벤트의 기본 동작 막기
일부 이벤트는 브라우저가 기본적으로 수행하는 동작이 있습니다. 이러한 기본 동작을 막고 자신이 원하는 동작을 처리하기 위해 preventDefault 메서드를 사용할 수 있습니다.

<a href="https://www.example.com" id="myLink">Click me</a>

let link = document.getElementById('myLink');

function handleLinkClick(event) {
    event.preventDefault(); // 기본 동작 막기
    console.log('Link clicked!');
}

link.addEventListener('click', handleLinkClick);

---

애니메이션

애니메이션은 웹 페이지에서 요소들의 움직임과 변화를 부드럽게 처리하는 기술입니다. 애니메이션을 활용하면 웹 페이지에 생동감을 더해 사용자의 시선을 끌고 사용자 경험을 향상시킬 수 있습니다.

jQuery를 사용한 애니메이션

<div class="box"></div>

// jQuery를 사용한 애니메이션
$(document).ready(function() {
    $('.box').animate({ width: '200px', height: '200px' }, 1000);
});

CSS Transition을 이용한 애니메이션

<div class="box"></div>

/* CSS */
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 1s, height 1s;
}

.box:hover {
    width: 200px;
    height: 200px;
}

CSS Transition을 사용하면 특정 속성에 변화가 있을 때 애니메이션이 적용되도록 할 수 있습니다.

---

이벤트 핸들링과 애니메이션은 웹 페이지를 인터랙티브하고 생동감있게 만드는 데에 중요한 요소입니다. 사용자의 동작에 대응하여 웹 페이지의 동작을 조정하는 이벤트 핸들링과, 요소의 움직임과 변화를 부드럽게 처리하는 애니메이션은 웹 프론트엔드 개발에서 꼭 알아두어야 할 핵심 기능입니다. 이를 적절히 활용하여 사용자에게 흥미로운 웹 경험을 제공하는 웹 애플리케이션을 개발해보세요!