CodeIt_Sprint87 (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. (4)JavaScript중급_3_1_이벤트핸들러 등록 ⊙ 이벤트 핸들러 :＃알아야 할 개념 :● 개념1 : 이벤트 핸들러 등 방법○ 방법1 : 요소노드의 onclick프로퍼티에 함수 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 element.onclick = function ()//요소노드의 onclick 프로퍼티에 함수 선언 { console.log('함수 호출'); };○ 방법2 : 함수 선언 후 => 요소노드의 프로퍼티 메소드 addEventListener()에 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 function printBtn() //별도의 함수 선언{ console.log('버튼을.. 2024. 11. 13. (2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] ＃알아야 할 개념 :● 개념1 : Window 객체란?○ 정의 : 웹 브라우저 창에 대한 기능, 설정값 등등을 다룰 수 있도록 하는 JavaScript의 가장 상위 객체이다.- Ex1_ Window 객체의 프로퍼티 :window.innerWidth : 현재 출력되는 웹 브라우저의 창의 너비window.innerHeight : 현재 출력되는 웹 브라우저의 창의 높이- Ex2_ Window 객체의 프로퍼티 메소드 :window.open() : 현재 웹 브라우저에서 새로운 창을 생성 명령 메소드window.close() : 현재 웹 브라우저에서 창을 닫으라는 명령 메소드- Ex3_ Window 객체의 프로퍼티 객체 : (window.은 생략이 가능하다.)window.document..... window.con.. 2024. 11. 11. 이전 1 ··· 15 16 17 18 19 20 21 22 다음
