CS/javascript5 [javascript] 이벤트 위임 event delegation + bind(this) 정의 1 2 3 6 5 4 이런 table의 td에 접근할 때, 각각의 td에 event handler를 할당하는 것이 아닌 table자체에 event handler 하나만 할당함으로써 여러 요소의 event handler를 한꺼번에 다룰 수 있음! (캡처링, 버블링 베이스: https://kyj0032.tistory.com/125) 활용하기 1) menu의 button에 알맞은 함수 실행하기 menu안 button 각각에 event handler를 할당하는 대신, menu에서 button에 발생한 event를 받아서 맞는 함수를 처리할 수 있다. 저장하기 불러오기 검색하기 * js class의 인스턴스 변수: https://kyj0032.tistory.com/126 this._elem = elem; *.. 2024. 4. 19. [html] html의 data-* 속성 https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 표준이 아닌 속성이나, 추가적인 DOM 속성과 같이 다른 조작을 하지 않고도 HTML 태그에 추가 정보를 저장할 수 있도록 도와줌 속성 할당 2024. 4. 19. [javascript] 생성자 안에서 인스턴스 변수 초기화 배경 https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info 저장하기 불러오기 검색하기 이벤트 위임을 공부하던 중, 낯선 class 개념이 나왔다. class Menu { constructor(elem) { this._elem = elem; elem.onclick = this.onClick.bind(this); // (*) } 생성자 안에서 두번째 statement는 elem의 onclick을 현재 객체에 있는 onClick함수에 바인딩하기 위함이라고 이해했다. this._elem = elem; 그렇지만 첫번째 statement는 대체 무슨 역할을 하는 걸까? _elem이란 변수를 쓰지도 않는데 .. 답변 1. 일단 언더바(_)는 ja.. 2024. 4. 19. [javascript] 이벤트 버블링, 캡처링 EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. HTML 삽입 미리보기할 수 없는 소스 안에 있는 , 를 눌러도 div에 할당된 onclick 이벤트 핸들러가 작동한다. 처음엔 그냥 div가 div 안 전체 영역을 포함하는 것(트리구조)이라 그런 게 아닐까?라고 생각했지만.. 그거랑 별개로 이벤트 버블링이 동작하는 거라 그런 거였다. 이벤트 버블링으로 내가 생각한 "포함하는 구조"라는 직관적 개념이 구현되는 듯 1. 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작한다. 부모의 부모를 거슬러 가면서 최상단의 요소까지 모든 할당된 이벤트 핸들러를 실행한다.' FORM DIV P HTML 삽입 미리보기할 수 없는 소스 가장 안 쪽의 를 클릭하.. 2024. 4. 19. [javascript] 이벤트 1. 이벤트란 무언가 일어났다는 것 자주 쓰는 DOM 이벤트 예시 click, mouseover, mousedown, mouseup submit, focus keydown, keyup 등등 이벤트 핸들러 이벤트에 반응하기 위해, 이벤트가 발생했을 때 실행되는 함수 2. 이벤트 핸들러 구현 1) HTML 속성 HTML 삽입 미리보기할 수 없는 소스 해당 버튼을 누르면 onclick 안의 함수가 주어진다. + 이때, "" 안은 ''여야 한다. 그래야 헷갈리지 않고 코드가 제대로 실행된다. + 속성값은 대소문자 상관 없다. 2) DOM property + HTML attribute와 DOM property의 차이점 HTML attribute는 HTML에 존재, 문자열 DOM property는 DOM에 존재, .. 2024. 4. 18. 이전 1 다음
