[JavaScript] jQuery의 이벤트

🖱️event

mouseover(마우스가 올라왔을 때)

$('선택자').on('이벤트 종류' 할일);
//할일 : 임의함수, funciton(){}
=> ('#id').on('mouseover', function(){});

//마우스를 올렸을 때 배경색이 바뀌게
('#id').on('mouseover', function(){
  $(#id).css('background-color' , 'green');
});

mouseout(마우스가 나갔을 때)

('#id').on('mouseout', function(){
  $(#id).css('background-color' , 'yellow');
});

⛓️ 메서드 체인

위의 mouseover와 mouseout을 한 번에 진행한다.
한 메서드의 결과를 이어서 다른 메서드에 호출한다.

//1번 째 방법
('#id').on('mouseover', function(){
  $(#id).css('background-color' , 'green');
}).//세미콜론 없어짐, 그 자리를 .으로 연결
on('mouseout', function(){
  $('#id').css('background-color' , 'yellow');
});

//2번 째 방법
('#id').mouseover(function(){//on과 '('가 없어짐
  $(#id).css('background-color' , 'green');
}).
mouseout(function(){
  $('#id').css('background-color' , 'yellow');
});

//3번 째 방법
//h1도 속성 변경
('#id, h1').mouseover(function(){//on과 '('가 없어짐
  $(this).css('background-color' , 'green');
}).
mouseout(function(){
//$('#id, h1')으로 작성할 경우 모든 '#id, h1'에 적용되므로
해당 요소라는 것을 알려줄 필요가 있다.(this)
  $(this).css('background-color' , 'yellow');
});

📢 this : 이벤트가 일어난 그 요소