JQuery 편집하기 (부분)

== 이벤트 처리 ==

jQuery는 '''이벤트 처리'''를 매우 직관적이고 강력하게 만들어준다.

=== 기본 이벤트 처리 ===

<syntaxhighlight lang="javascript">
// 클릭 이벤트
$('#myButton').click(function() {
    alert('버튼이 클릭되었습니다!');
});

// 더블클릭 이벤트
$('#myButton').dblclick(function() {
    alert('버튼이 더블클릭되었습니다!');
});

// 마우스 이벤트
$('#myDiv').mouseenter(function() {
    $(this).css('background-color', 'yellow');
});

$('#myDiv').mouseleave(function() {
    $(this).css('background-color', 'white');
});

// hover 이벤트 (mouseenter + mouseleave)
$('#myDiv').hover(
    function() { // mouseenter
        $(this).addClass('highlight');
    },
    function() { // mouseleave
        $(this).removeClass('highlight');
    }
);

// 키보드 이벤트
$('#myInput').keydown(function(event) {
    console.log('키가 눌렸습니다:', event.which);
});

$('#myInput').keyup(function(event) {
    console.log('키가 떼어졌습니다:', event.which);
});

// 폼 이벤트
$('#myForm').submit(function(event) {
    event.preventDefault(); // 기본 제출 동작 방지
    console.log('폼이 제출되었습니다');
});

$('#myInput').focus(function() {
    $(this).css('border', '2px solid blue');
});

$('#myInput').blur(function() {
    $(this).css('border', '1px solid gray');
});
</syntaxhighlight>

=== on() 메소드 ===

'''on()''' 메소드는 jQuery의 '''통합 이벤트 핸들러'''로, 모든 이벤트를 처리할 수 있다.

<syntaxhighlight lang="javascript">
// 기본 사용법
$('#myButton').on('click', function() {
    alert('클릭되었습니다!');
});

// 여러 이벤트 동시 처리
$('#myInput').on('focus blur', function(event) {
    console.log('이벤트 타입:', event.type);
});

// 이벤트 객체와 데이터 전달
$('#myButton').on('click', {name: 'John', age: 30}, function(event) {
    console.log('이름:', event.data.name);
    console.log('나이:', event.data.age);
});

// 네임스페이스 사용
$('#myButton').on('click.myNamespace', function() {
    console.log('네임스페이스 클릭');
});

// 조건부 이벤트 처리
$('#myDiv').on('click', 'button', function() {
    // myDiv 내부의 button 요소가 클릭되었을 때만 실행
    console.log('내부 버튼 클릭');
});
</syntaxhighlight>

=== 이벤트 위임 ===

'''이벤트 위임'''(Event Delegation)은 동적으로 생성되는 요소에 이벤트를 처리할 때 매우 유용하다.

<syntaxhighlight lang="javascript">
// 문제가 있는 코드 - 나중에 추가된 버튼은 이벤트가 작동하지 않음
$('.dynamic-button').click(function() {
    alert('클릭!');
});

// 올바른 코드 - 이벤트 위임 사용
$(document).on('click', '.dynamic-button', function() {
    alert('클릭!');
});

// 더 구체적인 이벤트 위임
$('#container').on('click', '.item', function() {
    console.log('아이템 클릭:', $(this).text());
});

// 새로운 요소 추가 (이벤트가 자동으로 적용됨)
$('#container').append('<div class="item">새 아이템</div>');
</syntaxhighlight>

=== 이벤트 제거 ===

<syntaxhighlight lang="javascript">
// 모든 이벤트 제거
$('#myButton').off();

// 특정 이벤트 타입 제거
$('#myButton').off('click');

// 네임스페이스로 제거
$('#myButton').off('click.myNamespace');

// 특정 핸들러 제거
function myHandler() {
    alert('클릭!');
}

$('#myButton').on('click', myHandler);
$('#myButton').off('click', myHandler);

// 한 번만 실행되는 이벤트
$('#myButton').one('click', function() {
    alert('첫 번째 클릭에만 실행됩니다');
});
</syntaxhighlight>

=== 커스텀 이벤트 ===

<syntaxhighlight lang="javascript">
// 커스텀 이벤트 정의
$('#myDiv').on('myCustomEvent', function(event, data1, data2) {
    console.log('커스텀 이벤트 발생!');
    console.log('데이터 1:', data1);
    console.log('데이터 2:', data2);
});

// 커스텀 이벤트 발생시키기
$('#myDiv').trigger('myCustomEvent', ['Hello', 'World']);

// triggerHandler - 기본 동작 방지하고 첫 번째 요소에만 적용
$('#myDiv').triggerHandler('myCustomEvent', ['Data']);
</syntaxhighlight>