본문 바로가기

programming study

 (889)
40장. 이벤트(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.8 DOM 요소의 기본 동작 조작 40.8.1 DOM 요소의 기본 동작 중단 DOM 요소는 기본 동작이 있음 preventDefault 메서드는 이 기본 동작을 중단 시킴 40.8.2 이벤트 전파 방직 stopPropagation 메서드는 이벤트 전파를 중지시킴 40.9 이벤트 핸들러 내부의 this 이벤트 핸들러 어트리뷰트 방식의 이벤트 핸들러의 this는 전역 객체 window를 가리킴 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킴 이벤트 객체의 currentTarget 프로퍼티와 같음..
40장. 이벤트(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.5 이벤트 객체 이벤트 발생 시 이벤트 객체가 동적으로 생성 생생된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달 이벤트 핸들러에 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 함 이벤트 핸들러 어트리뷰트 방식의 경우, 반드시 매개변수 이름이 event이어야 함 40.5.1 이벤트 객체의 공통 프로퍼티 Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티임 target : 이벤트를 발생시킨 객체 currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소를 가리킴 40.6 이벤트 전파 Event propagation 생성된 이벤트 객체..
Vue.js - Vuex(mutations, getters) 1. mutations store의 state를 조작하는 역할 1.1 정의 a태그와 같이 특정 요소를 클릭하면 지정한 경로로 이동 import Vue from 'vue'; import Vuex from 'vuex'; ​ Vue.use(Vuex); ​ export default new Vuex.Store({ state: { username: '', }, // state를 변경하는 역할 mutations: { // 첫 번째 파라미터: store의 state // 두 번째 파라미터: commit 할때의 payload setUsername(state, username) { state.username = username; }, }, }); ​ 1.2 호출 commit으로 정의한 mutations 호출 ... ....
40장. 이벤트(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.1 이벤트 드리븐 프로그래밍 브라우저는 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킴 클릭, 키보드 입력, 마우스 이동, 드래그 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임 이벤트 핸들러 : 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 이벤트 핸들러의 호출을 위임 Window, Document, HTMLElement 타입의 객체는 다양한 이벤트 핸들러 프로퍼티를 가지고 있음 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 40.2 이벤트 타입 이벤트의 종류를 나타내는 문자열 약 200여 가지가 있음 MDN ..
39장. DOM(5) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.7 어트리뷰트 39.7.1 어트리뷰트 노드와 attributes 프로퍼티 HTML 요소는 여러 개의 어트리뷰트(속성)를 가질 수 있음 특정 HTML 요소에만 한정적으로 사용 가능한 어트리뷰트도 있음 input 요소에만 사용 가능한 type, value, checked 어트리뷰트 HTML 문서가 파싱될 때 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결 어트리뷰트 노드의 참조는 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장 Element.prototype.attribues 프로퍼티로 취득 가능 getter만 존재하는 읽기 전용 접근자 프로퍼티..
39장. DOM(4) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.6 DOM 조작 새로운 노드르 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체 리플로우와 리페인트가 발생하므로 성능 영향 39.6.1 innerHTML Element.prototype.innerHTML setter, getter 모두 존재하는 접근자 프로퍼티 요소 노드의 HTML 마크업을 취득하거나 변경 요소 노드의 콘텐츠 영역(시작 태그 ~ 종료 태그)에 포함된 HTML 마크업을 문자열로 반환 문자열 할당 시 HTML 마크업을 파싱하여 자식 노드로 DOM에 반영 모든 자식 노드를 제거하고 할당한 것으로 DOM을 변경 사용자로부터 입력 받은 데이터를 그대로 innerHTML프로퍼..
39장. DOM(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.3 노드 탐색 요소 노드 취득 후 부모, 형제, 자식 노드 등을 탐색 Node.prototype parentNode previousSibling firstChild childeNodes 모두 읽기 전용 접근자 프로퍼티이므로 값을 할당할 수 없음 Element.prototype previousElementSibling nextElementSibling childeren 39.3.1 공백 텍스트 노드 공백 텍스트 노드 : HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자는 텍스트 노드 생성 노드 탐색 시, 공백 텍스트 노드에 주의 39.3.2 자식 노드 탐색 Node.pro..
39장. DOM(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.2 요소 노드 취득 HTML의 구조나 내용, 스타일을 동적으로 조작하기 위해서는 요소 노드를 취득해야 함 DOM은 요소 노드를 취득할 수 있는 다양한 메서드 제공 39.2.1 id를 이용한 요소 노드 취득 Document.prototype.getElementById 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환 id는 문서 내에서 유일한 값이어야 함 여러개가 존재하더라도, 에러가 발생하지는 않으나 첫 번째 요소만을 반환 존재하지 않는 경우 null을 반환 39.2.2 태그 이름을 이용한 요소 노드 취득 Document.prototype/Element.proto..

티스토리툴바