CodeIt_Sprint/JavaScript_중급12 (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. (6)JavaScript중급_3_3_이벤트 버블링과 이벤트흐름(DOM이벤트객체 경로과정) ⊙ 이벤트 버블링 :● 개념1 : 이벤트 버블링 정의○ 정의 : 특정 요소노드에서 이벤트 핸들러가 작동될 시, 이벤트 객체(event)가 이동되는 과정 중 하나를 의미하여, 더 자세히는 그 과정 중 특정 태그부터 부모 태그 .... 맨 상위 노드로 이동되는 단계를 일컫는 말이다.-Ex :● 개념2 : 버블링 단계일 때, event객체는 이동하지만. event 객체의 target객체 값은 변하지 않는다!!○ 설명 :태그인 item3에서 event 발생시, 버블링 단계 괴정으로 event의 이동과 그 시점에서의 event.target값은 다음과 같다.event객체 : item3 //태그 => list // 태그 => content // 태그 => ... window 태그event.target값 : it.. 2024. 11. 13. 이전 1 2 3 다음
