본문 바로가기

전체 글70

이벤트 버블링과 캡처링 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.
js 비교연산자 '==' 와 '===' 차이점은? 자바스크립트에서 '==' 와 '===' 는 비교연산자로 사용되며 주요 차이점은 값과 데이터 타입을 비교하는 방식입니다. 1. ' === ' 일치연산자 라고 하며 값과 데이터 타입이 모두 동일한지 비교합니다. 엄격한 비교를 원할 때 사용합니다. 2.' == ' 동등연산자 라고 하며 값이 동일하지만 데이터타입은 비교하지 않습니다. 느슨한 비교를 수행하여 값이 동일한지만을 판단해 필요에따라 자동으로 타입 변환이 이루어집니다. 타입을 명시적으로 처리해야될 경우에만 사용합니다. 2 === 2 // true, 숫자와 숫자가 일치 2 === "2" // false, 숫자열과 문자열이라 데이터 타입이 다르다 2 == 2 // true, 숫자와 숫자가 일치 2 == "2" // true, 문자열 '2'가 숫자 2로 변환.. 2023. 12. 12.

티스토리툴바