JavaScript 이벤트 객체 속성 및 메서드-2
이벤트 객체이벤트 객체 속성 및 메서드()이벤트 동작 제어 : preventDefault(), stopPropagation(), stopImmediatePropagation()이벤트 키 입력 : key, code, keyCode, ctrlKey, shiftKey, altKey, metaKey키워드event.preventDefault(), event.stopPropagation(), event.stopImmediatePropagation(), event.key, event.code, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey, event.metaKey, { passvie : false }# 이벤트 객체이벤트가 발생할 때 브라우저에서 자동으로 생..
JavaScript 이벤트 객체 속성 및 메서드-1
이벤트 객체이벤트 객체 속성 및 메서드()이벤트 기본 : type, timeStamp, defaultPrevented이벤트 타켓 : target, currentTarget, relatedTarget키워드event.type, event.timeStamp, event.defaultPrevented, event.target, event.currentTarget, event.relatedTarget# 이벤트 객체이벤트가 발생할 때 브라우저에서 자동으로 생성되는 객체로 이벤트의 세부 정보를 포함이벤트 객체를 통해 이벤트가 발생한 요소, 이벤트의 종류, 이벤트 발생 시간 등을 알 수 있음이벤트 객체는 이벤트 리스너의 콜백 함수에서 첫번째 인수(event)로 자동 전달콜백함수 내부에서 접근 및 활용 가능element..
JavaScript - DOM 선택자 2
부묘 요소 접근el.closest()요소 간 상하좌우 관계 접근el.parentElement, el.children, el.firstElementChild, el.lastElementChild, el.nextElementSibling, el.previousElementSibling문서 내 주요 DOM 요소 접근document.documentElement, document.body, document.head문서 내 특정 태그 목록 접근document.forms, document.images, document.links, document.scripts일반 / Shadow DOM 루트 접근generalEl.getRootNode(), shadowEl.getRootNode()Shadow DOM 이란?목표다양한 D..
JavaScript - DOM 선택자 1
DOM 이란?DOM 주요 선택자 getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAllHTML Collection vs NodeList 차이점예제코드목표웹 페이지에서 JavaScript를 통해 HTML 요소를 선택하는 방법은 다양하며, 상황에 따라 적절한 선택자를 사용하는 것이 중요하다. 자주 사용되는 DOM 선택자들을 살펴보자키워드getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAll HTML Collection,..
