CodeIt_Sprint/JavaScript_중급12 (13)JavaScript중급_4_이벤트 활용_Scroll이벤 ＃알아야 할 개념 :● 개념_1 : Scroll 관련 이벤트 객체 ○ event.type (Only one)브라우저 창 기준 scroll을 했을 시, 발생하는 event.type : 'scroll'● 개념_2 : Scroll의 객체는 event객체가 아닌, window객체, window객체 + addEventListener()를 한다.window객체의 프로퍼티 : scrollY //브라우저 창 기준, 몇px만큼 아래로 scroll 했는지 값을 반환window.addEventListener('scroll' , function); ● 개념_3 : 주요 활용 법○ 활용1 : scrollY를 몇 px 이상 내려갈 시, 다른 태그(ex_header_nav)가 그림자 효과 생기도록 코드 구현const headNa.. 2024. 11. 16. (12)JavaScript중급_4_이벤트 활용_Input태그관련 이벤트 ＃알아야 할 개념 :● 개념_1 : Input_Focus 관련 event.type , event.프로퍼티○ 정의 :Input 태그가 마우스 포인터로 눌러 Focus 된 상태에 관한 기본적인 event.type.- event.type (4가지 : 2 + 2)○ Form 태그를 요소노드로 했을 시, Focus됐을 때, : 'focusin'Focus가 풀렸을 시 : 'focusout'○ 해당 Input 태그를 요소노드로 했을 시, Focus됐을 때, : 'focus'Focus가 풀렸을 시 : 'blur'※왜저렇게 차이를 두었을까? => 'focus'와 'blur'는 Input 태그에 더 세부적인 기능, 동작을 적용시에 활용법 같다.● 개념_2 : Input 입력 관련 event.type , event.프로.. 2024. 11. 15. (11)JavaScript중급_4_이벤트 활용_KeyBoard_event ＃알아야 할 개념 :● 개념_1 : 키보드 기본 이벤트 type, 프로퍼티○ 정의 :Mouse 키 눌렀을 때, 떼었을 때, 관한 기본적인 event.type과 event.프로퍼티가 존재한다.- event.type 키보드를 누른 순간 (2가지) : 'keydown' || 'keypress'키보드를 뗀 순간 : 'keyup'- event.프로퍼티 키보드 입력된 값 : key키보드 입력된 물리적 위치 : codeEx1_대문자 A, 소문자 a 눌렀을 시event.key : 'A' , 'a'event.code : Key AEx1_왼쪽 Shift , 오른쪽 Shift 누를 시event.key : 'Shift'event.code : ShiftLeft || ShiftRight● 개념_2 : 키보드 이벤트 type 인 .. 2024. 11. 15. (10)JavaScript중급_4_이벤트 활용_Mouse_event_2_마우스포인터 ＃알아야 할 개념 :● 개념_1 : Mouse 이벤트_2_마우스 포인터(움직이는 마우스) 관련 event○ 정의 :Mouse 포인터에 관한 기본적인 event.type과 event.프로퍼티가 존재한다.○ event.type : (5가지)마우스 포인터가 요소 내 움직일 때, event.type : 'mousemove'마우스 포인터가 요소 밖 => 안으로 움직일 때, event.type : 'mouseover' || 'mouseenter'마우스 포인터가 요소 안 => 밖으로 움직일 때, event.type : 'mouseout' || 'mouseleave'○ event.프로퍼티 :마우스 포인터가 요소기준 위치값 반환메소드 : offset(X||Y) 마우스 포인터가 웹페이지 기준 위치값 반환메소드 : pag.. 2024. 11. 15. 이전 1 2 3 다음
