국비 63일차 - [jQuery] 이벤트, 효과

■ 이벤트

1. 이벤트 연결 메소드

1) on(), off()

- on() : 이벤트 연결 시 사용

- off() : 이벤트 제거 시 사용

$('#div1').on('mouseleave', (event)=>{
    $(event.target).css('background-color', 'hotpink')text('마우스가 내려감');
});

$('#div1').on('click', (event) => {
    $(event.target)
        .css('background-color', 'white')
        .text('')
        .off('mouseenter mouseleave'); // 띄어쓰기로 2개 이상 이벤트 지정 가능
});

 

2) 간단한 연결 이벤트

- 이벤트에 해당하는 메소드에 직접 핸들러 지정 가능

- 하나의 이벤트만 사용할 때 사용함(이벤트 여러 개 사용 시 on() off() 방법 씀)

- mouseenter : 마우스가 요소 안으로 들어올 때 메소드 실행

- mouseleave : 마우스가 요소 밖으로 나갔을 때 메소드 실행

//$('선택자').메소드(function(event){}); 

$('#div2').mouseenter((event) => {
    $(event.target).css('background-color', 'beige').text('마우스가 올라감');
});

 

3) one()

- 이벤트를 연결하여 단 한 번 실행하는 메소드

$('#div3').one('click', () => {
    alert('처음이자 마지막으로 이벤트 핸들러 실행');
});

 

 

2. 키보드 이벤트

1) keydown, keypress, keyup

- keydown : 키 눌렀을 때 메소드 실행

- keypress : 키를 눌렀을 때 메소드 실행(한글, alt, ctrl, shift, esc 인식 X)

- keyup : 키 누르고 땠을 때 메소드 실행

$('#textarea1').on({
    keydown: (event) => {
        console.log(`keydown > key: ${event.key}. keyCode: ${event.keyCode}`);
    },
    keypress: (event) => {
        console.log(`keypress > key: ${event.key}. keyCode: ${event.keyCode}`);
    },
    keyup: (event) => {
        console.log(`keyup > key: ${event.key}. keyCode: ${event.keyCode}`);
    }
});

 

2) 글자 수 세기

$('#textarea2').on('keyup', (event) => {
    let target = $(event.target);
    let counter = $('#counter')
    let currentLength = target.val().length;
    let maxLength = parseInt($('#maxLength').text());

    if(currentLength > maxLength) {
        target.val(target.val().substr(0, maxLength)); // 최대 길미만큼 잘라서 리턴
    } 

    counter.text(currentLength);
})

// html 문서에서 최대 길이 문자를 태그로 감싸 아이디를 지정하면(maxLength)
// 길이가 변경되어도 소스 코드를 변경할 필요 없다.

 

3) 아이디 조건 확인

// 첫 글자는 영문 소문자, 영문 소문자와 숫자로만 이루어진
// 4~12자 아이디 조건 확인 방법(정규 표현식 사용)
$('#userId').keyup((event) => {
    let regExp = /^[a-z][a-z0-9]{3,11}$/; // [a-z] 이거 한 글자 빼야하니까 3~11 글자로 적음
    let id = event.target.val();

    if(id === null || id ===''){
        $('#idCheck')
        .text('사용  아이디')
        .css('color', 'white');
    } else if(regExp.test(id)){ //조건 맞는지 참과 거짓으로 체크하려면 test 메소드 씀
        $('#idCheck')
            .text('사용 가능한 아이디')
            .css({color: 'green', fontWeight: 'bold'});
    } else {
        $('#idCheck')
            .text('사용 불가능한 아이디')
            .css({color: 'red', fontWeight: 'bold'});
    }
});

 

 

3. trigger()

- 이벤트를 강제로 발생시키는 메소드

$('#div4').on('click', () => {
    let counter = $('#counter2');
    let currentCount = parseInt(counter.text());

    counter.text(++currentCount);
});

$('#btn1').on('click', () => {
    $('#div4').trigger('click');
});

// btn1을 누르면 div4 요소의 click 메소드가 강제 실행된다.

 

 

■ 효과(Effect)

- HTML 문서 내에 애니메이션 효과를 만들기 위한 메소드의 집합

 

1. show(), hide(), toggle() - 보여주기, 숨기기(짠)

- show() : 선택된 요소를 점점 크게 보여주는 메소드

- hide() : 선택된 요소를 점점 작게 숨겨주는 메소드

- toggle() : show, hide 동시에 적용하는 메소드(없으면 보여주고, 있으면 숨김)

$('#show').on('click', () => {
    $('#imgCity').show(1500); // show(시간 숫자) 시간 안넣으면 그냥 뜨고 사라지고 함 
    $('#imgCity').show(5000, 'swing'); // swing 기본값으로 생략 가능 , 15000 = 15초
});

$('#hide').on('click', () => {
    $('#imgCity').hide(5000, 'linear');
});

$('#toggle').on('click', () => {
    $('#imgCity').toggle(5000, 'linear');
});

 

2. slideDown(), slideUp() - 아래로 요소 보여주기, 숨기기(좌르륵)

- slideDown() : 선택된 요소 위치에서 아래로 요소를 보여주는 메소드
- slideUp() : 선택된 요소를 위로 숨겨주는 메소드
- slideToggle() : slideDown, slideUp을 동시에 적용하는 메소드

$('.menu').on('click', (event) => {
    let content = $(event.target).next(); // 클릭한 .menu 요소의 다음 요소

    $('.contents').slideUp();
    content.slideDown(500,  'swing');
});

 

3. fadeIn(), fadeOut(), fadeTo(), fadeToggle() - 투명도 조절

- fadeIn() : 선택된 요소를 점점 진하게 보여주는 메소드

- fadeOut() : 선택된 요소를 점점 희미하게 보여주는 메소드

- fadeTo() : 선택된 요소의 투명도 조절하는 메소드 (1이면 원본, 0 이면 안보임, 0.5 중간 흐림)

- fadeToggle() : fadeIn, fadeOut을 동시에 적용하는 메소드

$('#fadeIn').on('click', () => {
    $('#imgforest').fadeIn(1000, 'linear');
});

$('#fadeOut').on('click', () => {
    $('#imgForest').fadeOut(1000, 'linear');
});

$('#fadeToggle').on('click', () => {
    $('#imgForest').fadeToggle(1500, 'swing');
});

$('#imgForest').hover(
    (event) => {
        if(event.type === 'mouseenter'){
            $(event.target).fadeTo(500, .5, 'linear');
        } else if (event.type === 'mouseleave') {
            $(event.target).fadeTo(500, 1, 'swing'); // 투명도 1이면 원래대로
        }
    }
);

 

 

■ 기타

1. HTML DOM Events 확인할 수 있는 링크

https://www.w3schools.com/jsref/dom_obj_event.asp

HTML DOM Event Object