본문 바로가기

분류 전체보기70

keypress / keydown은 같은가? 키보드 이벤트 자바스크립트를 이용하여 웹페이지 상에서 키보드 입력을 감지했을 때 발생하는 이벤트 keydown / keypress / keyup 이 있다. keypress / keydown은 키를 누른다는 것에 이벤트가 발생하는 건데 어떤 차이가 있을까 https://codepen.io/yamoo9/pen/vRmeQZ DOM API - keydown, keypress, keyup, input 이벤트 간 차이 ... codepen.io 가장 직관적으로 알 수 있는 사이트 keydown 모든 키를 눌렀을 때 발생한다 (물리적으로 어떤 키가 눌렸는지) 방향키와 문자, 숫자, 특수 문자 키를 눌렀을 때 발생 단 문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생하지만 그 외의 키를 눌렀을 때.. 2023. 12. 14.
data 와 dataset data 어트리뷰트와 dataset프로퍼티를 사용하면 html요소에 정의한다 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트 정보를 제공하는 DOMstringMAP 객체 반환한다. data-로 시작하는 속성은 모두 dataset 프로퍼티에 저장되고 element.dataset.데이터명칭 으로 접근 할 일 : 담당자 : 상태 : 대기중 진행중 완료 const fields = document.querySelectorAll('[data-field]'); const btns = document.querySelectorAll('.btn'); for (let btn of btns) { const status = btn.dataset.status.. 2023. 12. 13.
이벤트 버블링과 캡처링 1. 이벤트 버블링 이벤트가 대상 요소에서 시작해 문서 트리의 최상단으로 이동하는 단계 / 하위요소가 상위요소로 다시 올라가는 단계 이벤트가 이동하는 동안 각 부모 요소에서 등록된 이벤트 핸들러가 순차적으로 실행된다. 2. 이벤트 캡처링 이벤트가 문서 트리의 최상단에서 시작하여 이벤트가 발생한 요소까지 이동하는 단계 / 상위에서 하위요소로 향한다. 3. 이벤트 전파 막기 event.stopPropagation() 상위 요소로의 이벤트 전파를 막기 위한 메서 만약 이벤트가 전파되어 상위엘리먼트에서 발생한 이벤트가 하위엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용 event.preventDefault() html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드 예를 .. 2023. 12. 12.
js- classList https://developer.mozilla.org/ko/docs/Web/API/Element/classList Element.classList - Web API | MDN Element.classList 는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList (en-US)를 반환하는 읽기 전용 프로퍼티이다. developer.mozilla.org classList 함수를 사용해서 html요소에 class속성을 관리할 수 있다. classList 메서드 1. add ("className ") 인수로 전달한 1개 이상의 문자열을 class 목록에추가한다. main.classList.add('one'); // class='one' main.classList.add('two','thr','fou'.. 2023. 12. 12.
얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 자바스크립트에서 얕은 복사와 깊은 복사는 객체나 배열을 복제하는 두 가지 다른 방법을 나타냅니다. 데이터 구조의 중첩 정도에 따라 어떻게 동작하는지가 다릅니다. 1. 얕은 복사(Shallow Copy) 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말합니다. 객체안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있따면 이를 얕은 복사라고 합니다. 즉 내부 객체나 배열은 동일한 메모리 위치를 참조하게 됩니다. 얕은 복사의 방법 중 몇가지 ○ spread 연산자 ○ Object.assign 메서드 ○ Array.from 메서드 ○ slice 메서드 ○ concat 메서드 ○ Map 생성 2. 깊은 복사(Deep Copy) 객체 안에 객체가 있을 경우에도 원본과의.. 2023. 12. 12.

티스토리툴바