CodeIt_Sprint/JavaScript_중급7 (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. (5)JavaScript중급_3_2_이벤트객체 ⊙ 이벤트 객체 :＃알아야 할 개념 :● 개념1 : 이벤트 객체의 정의○ 정의 : onclick 프로퍼티 || addEventListener() 프로퍼티 메소드로 이벤트 핸들러 등록시, 동작과 해당 태그의 상호 연결이 가능하도록 하는 역할을 해주는 객체이다.- Exconst btn = document.querySelector('BUTTON'); //버튼 태그의 요소노드 변수 저장function printBtn(event){ event.target.style.backgroundColor = "yellow";}btn.addEventListener('click',printBtn);//버튼을 마우스 왼쪽 클릭으로 누를 시, 버튼의 배경색을 yellow로 변한다.● 개념2 : 이벤트 객체의 주 프로퍼티 (2가지).. 2024. 11. 13. 이전 1 2 다음
