본문 바로가기

CodeIt_Sprint87

(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.
(9)JavaScript중급_4_이벤트 활용_Mouse_event_1_클릭관련 ＃알아야 할 개념 :● 개념_1 : Mouse 이벤트 기본 이론○ 정의 :Mouse 포인터에 관한 기본적인 event.type과 event.프로퍼티가 존재한다.○ event.button : 마우스의 왼쪽 클릭, 오른쪽 클릭 , 드래그 버튼 에 따라 0,1,2값을 반환하는 event객체 프로퍼티 :왼쪽 마우스 클릭 : event.button == 0오른쪽 마우스 클릭 ; event.button == 2드래그 클릭 : event.button == 1○ event.type : 요소노드에 addEventListener로 이벤트 핸들러를 추가할 때, 마우스 기본 동작에 추가할 떄, event.type들 //존나 많지만, - 마우스의 어떤 버튼에 관한 event type || 마우스 클릭 횟수에 관한 event t.. 2024. 11. 15.
(8)JavaScript중급_3_5_event 객체의 프로퍼티 메소드 : preventDefault() ＃알아야 할 개념 :● 개념 : event 객체의 프로퍼티 메소드 : preventDefault();○ 정의 : event객체의 type('click', 'keydown' , 'contextmenu')의 이벤트 핸들러를 적용 못하도록 막는 메소드이다.○ 보통 사용 패턴 :해당태그 .addEventfunction( event.type , function (event) ){event.pretendDefault() //1_ 막기 alert("막았어 병신아") // 2_ 막혔다고 알림 경고창 출력 메소드}#Default 상황 : Link I Love Codeit! ● 실습 1 : JavaScript 코드로 Link를 왼쪽 마우스 클릭을 할 시 , href 링크로 이동되지 않아지고, "꺼져"라는 알림창.. 2024. 11. 13.
(7)JavaScript중급_3_4_이벤트 위임 문제 , 해결방법은 if조건절 + event.contains() 메소드 ＃Default 상황 :아래와 같이, 기존의 ul태그 li태그 항목들이 있다.각 li 태그에 클릭을 하게 될 경우, .done 클래스의 css 스타일 add되어, 항목이 완료됐다는 이벤트 핸들러 적용  오늘 할 일 자바스크립트 공부 유투브 시청 저녁 약속 독서 일기 쓰기 ● 문제 상황 :- JavaScript 코드에서 li 요소 노드 - "자살하기"를 한개 더 추가하게 되면, "자살하기" li 요소노드는 해당 스타일 시트 적용이 되지 않는다.- 이유. 코드 순서상 기존의 li 요소노드들만("자살하기" 제외) addEventListener()만 적용되어있다.● ★해결 방법 : ★요소노드.classList의 프로퍼티 메소드 contains('class속성값')메.. 2024. 11. 13.

티스토리툴바