1. 이벤트의 종류

• 마우스 이벤트

• 키보드 이벤트

• 포커스 이벤트

• 폼양식 이벤트

• 윈도우 이벤트

1. • click : 마우스로 대상을 클릭하였을 때 이벤트 내용이 실행됨
2. • dblclick : 마우스로 대상을 더블클릭하였을 때 이벤트 내용이 실행됨
3. • mouseenter : 마우스로 대상을 오버하였을 때 이벤트 내용이 실행됨.(=mouseover)
4. • mouseleave : 마우스로 대상을 오버하였다가 뺐을 때 이벤트 내용이 실행됨(=mouseout)
5. • hover : 마우스로 대상을 오버하였을 때와 뺐을 때 둘 다 각각 따로 이벤트 내용이 실행됨
6. • focus : 마우스로 클릭하여 포커스가 발생되었을 때 이벤트 발생됨(양식에서)
7. • blur : 폼양시겡서 포커스가 해제되었을 때 이벤트가 발생됨
8. • toggle : 대상요소를 클릭할 떄 마다 지정된 함수를 호출하여 실행함
9. • each : 개별(각각에 대하여)처리하는 이벤트 함수

* toggle 이벤트는 제이쿼리 1.8버전 이하에서만 사용됨

2. 이벤트 등록방법(작성법)

1. 단독 이벤트 : $('이벤트 대상').이벤트 메서드(function(){실행할 내용;});

2. 그룹 이벤트 : $('이벤트 대상').on('이벤트 종류1, 이벤트 종류2...',function(){실행할 내용;});

3. 마우스 이벤트와 폼양식 이벤트 사용하기

로그인 폼

아 이 디 :

비밀번호 :

      // input 태그에 focusIn(), focusOut()이벤트 적용하기
        $('#id_txt, #pw_txt').focusin(function(){
          $(this).css('border','1px solid #00f');
        }); 
      
        $('#id_txt, #pw_txt').focusout(function(){
          $(this).css('border','1px solid #ccc');
        });

4. each 함수를 사용하여 메뉴 각각 개별적인 서식을 적용하기_중요

• 메뉴1
• 메뉴2
• 메뉴3
• 메뉴4

      let t_mnu = $('.t_mnu > li > a');
      t_mnu.each(function(){  //버튼 4개에 '각각' 개별적으로 클릭 이벤트를 준다
        $(this).click(function(){ // 각 버튼 클릭시
        //this 내가 선택한 것(a태그)의.부모(li).의 형제.에서 .내가 원하는 태그 찾기 => this로 내가 선택한 것은 서식을 적용하고, 선택하지 않은 것들의 서식은 제거한다.
        $(this).css('background','yellow').parent().siblings().find('a').css('background','#efefef'); 
        return false;
        });
      });
    

5. TOP버튼 _ 윈도우 이벤트를 사용하여 상단 h2 고정하고/풀기

• 브라우저 윈도우 세로스크롤 값을 사용하여 top버튼이 보이게/숨기게 한다

• 지정된 높이에서는 보이지 않게 하고 그 밑으로는 서서히 보이게 함

TOP

      // 1. javascript ver
      let scrollTop;

      window.addEventListener('scroll',function(){ // scroll 이벤트
        scrollTop = this.pageYOffset; //위 값을 변수에 담기
        //console.log(scrollTop); //콘솔창으로 스크롤 값 확인
        const t_btn = document.querySelector('.top_btn');
        
        if(scrollTop>=250){ //스크롤 값이 500이상일 때 탑버튼 보이게
          t_btn.classList.add('act');
        }else{ //스크롤 값이 보다 작으면 탑버튼 숨기게
          t_btn.classList.remove('act');
        }
      });
    
      // 2. jquery ver
        let scrollTop2;
        
        $(window).scroll(function(){
          scrollTop2 = $(this).scrollTop();
          console.log(scrollTop2);
    
          if(scrollTop2>=250){
            $('.top_btn').addClass('act');
          }else{
            $('.top_btn').removeClass('act');
          }
        });