JQuery STEP 2 - JQuery Event

★ jQuery 이벤트

• 이벤트 전용 함수
  • 가독성, 편리함 
  • a. obj.test()           : getter > 읽기 
  • b. obj.test(param) : setter > 쓰기

jQuery('#btn3').click(function(){
    alert('jQuery');
});

• 이벤트 범용 함수
  • 구문 길다.(불편함) 
  • a. obj.test(param)               : getter > 읽기
  • b. obj.test(param, param)   : setter > 쓰기

// b. 이벤트 범용 함수
jQuery('#btn4').on('click', function(){
    alert('jQuery');
});

 

■ mouseover, mouseout

• 이벤트 전용 함수

jQuery('#btn3').mouseover(function(){
    // alert('jQuery');
    event.target.style.backgroundColor = 'gold';
});

jQuery('#btn3').mouseout(function() {
    event.target.style.backgroundColor = 'white';
});

• 범용 전용 함수(Best)

// 방법 1
const obj = {
    mouseover : function() {
        event.target.style.backgroundColor = 'gold';
    },
    mouseout : function() {
        event.target.style.backgroundColor = 'white';
    }
};
Query('#btn4').on(obj);

// 방법 2
Query('#btn4').on({
    mouseover : function() {
        event.target.style.backgroundColor = 'gold';
    },
    mouseout : function() {
        event.target.style.backgroundColor = 'white';
    }
});

• 이벤트 제거
• 전용 or 범용 > 모두 제거가 가능하다.

jQuery('#btn4').off('mouseout'); //이벤트 제거

 

■ jQuery 문법(jQuery 함수 기능)

• 1. 태그 검색
• 2. 형변환(자바스크립트 객체 > jQuery 객체)

jQuery('#btn5').click(function() {

    //이벤트 주체?
    // alert(event.target.value);
    // alert(event.srcElement.value);
    // alert(this.value);

    //DOM 문법
    event.target.style.backgroundColor = 'gold';

    //순수 자바스크립트 객체 > (변환) > jQuery 객체
    //this. css is not a function
    jQuery(this).css('background-color', 'gold');
    
    jQuery(document.body).css('background-color', 'orange');

});

• 거의 대부분 jQuery 함수는 > 자기 자신을 반환한다.
• 메소드 체이닝

jQuery('#btn6')
    .mouseover(function() {
        $(this).css('background-color', 'gold');
    }).
    mouseout(function() {
        $(this).css('background-color', 'white');
});