220822 19금 수업 정리하기

늦은 정리..

jQuery 이벤트에 대해 알아보도록 하자

 

마우스 왼쪽 버튼을 누르는 3가지의 이벤트 메서드가 있다.

이름만 들어도 알것 같은 click( ).

클릭하면 발생하는 이벤트 메서드이다

주의할 점은 누르는 즉시가 아니라 놓는 즉시라는 것.

 

mousedown( ) 번역해보면 마우스를 누를때. 라는 뜻인데 그대로 받아들이면 된다.

눌렀을 때 발생하는 이벤트 메서드이다.

 

그렇다면 mouseup( ) 은?

역시 마우스를 눌렀다가 올릴 때 발생하는 메서드이다.

 

오늘은 좀 쉽구만~?

 

두번째는 마우스 포인터의 위치에 따른 이벤트 발생 메서드이다.

마우스 포인트의 위치? 마우스 커서의 움직임 감지라고 보면 된다.

mouseenter( )  :  마우스 포인터가 특정 영역에 위치함.

mouseleave( )  :  마우스 포인터가 떠남.

hover( )             :  마우스가 왔다 갈 때 마다 일어남 enter+leave

---------------------------------------------------------------

mouseover( )    : 마우스 포인터가 특정 영역에 위치함.

mouseout( )      : 마우스 포인터가 떠남.    

          

구분선 위쪽은 자식요소에게서 연쇄반응 하지 않음!

구분선 아래쪽은 자식요소에게서 연쇄반응 함!

자식 요소에게서 연쇄반응을 한다는 것은 자식에게 먹을 것을 주면 나한테도 나눠주는 것이라고 보면된다.

일심동체!

 

세번째는 마우스로 버튼을 클릭하거나 Tab 키등으로 선택된 포커스 동작을 가질 경우,

blur( ) 는 해석하면 흐리게 하다라는 뜻. 

focus를 잃을 때 발생하는 메서드이다.

 

focus( )는 나에게 포커스가 주어지면 입력요소가 아니더라도 무조건 발생하는 것이다. 

 

focusin( )은 focus가 적용된 요소에 발생한다.

 

focusout( )은 focus가 해제된 요소에 발생한다.

 

blur == focusout    이렇게 볼 수 있고,

focus == focusin    이렇게 볼 수 있다. 

 

blur focusout 차이점은 둘다 해제된 요소에 발생하지만 focusout은 트리거(자식요소에게도 반응)가 있다는 것이고

focus focusin의 차이점도 트리거의 차이다.

위에서 보았던 out( ) 이 붙으면 트리거가 있구나~ 정도로 알고 있으면 되겠다.

 

네번째 메서드는 

 

키보드 키 메서드.!

keydown( ) : 키를 누를 때 발생

keypress( ) : 키를 누를 때 발생   => alt, ctrl, shift에 반응 하지 않는다. (오 기능키에 반응하지 않는군?)

keyup( ) : 키를 눌렀다 뗄 때 발생

 

참고사항 : 키 별로 코드를 가지고 있는데,

 

enter : 13,   shift : 16,   ctrl : 17,   alt : 18,   caps lock: 20 을 갖고 있다.

 

마지막으로 기타 이벤트를 알아보자

 

change( ) : value값이 바뀔 때 발생 

select( ) : 더블클릭 or 드래그 등으로 텍스트가 선택될 때 발생 ( 블럭 배경 음영 발생)

scroll( ) : 마우스 휠을 회전할 때 발생 

submit( ) : form 요소가 전송실행 할 때 발생

on( ) : on("이벤트", 익명함수); - 사용법

           on("click", function( ){ 내용 });

           여러 이벤트를 설정할 수 있다.

           on("click keydown mouseover mouseleave",function( ){ }); 이렇게 되면

                  클릭하고 키를 누르고 마우스를 올리고 마우스를 뺄 때 익명함수가 실행되는 것이다

 

off( ) : on이벤트 메서드 해제.

 

 

정리하자면 영어단어 뜻을 그대로 가지고 있는 경우가 많아서

중고등학교 영어 단어 정도만 알아도 뜻풀이는 가능하다.

사용법도 어렵지 않아서

잘 사용하면 아주 재밌고 간결한 코드 작성이 가능해진다!