JS3 [jQuery] 이벤트 위임(Event Delegation) 이벤트 위임 (Event Delegation) : 동적으로 생성되는 요소에 대해 이벤트 처리를 쉽게 할 수 있는 방법. 대상 요소에 대해 일일이 이벤트 바인딩을 하지 않아도 되므로 코드의 성능도 개선되고 처리 속도가 빨라진다. HTML 삽입 미리보기할 수 없는 소스 1. 제목 클릭 시 메뉴 옆에 새 메뉴 추가 2. 기존 메뉴 클릭 시 밑에 표시됨 >> 추가한 메뉴는 클릭해도 표시되지 않는 문제 발생! // 기존 코드 $('h5').on("click", function(){ $('#result22').text(this.innerText); }); 모든 'h5' 요소에 대해 click 이벤트를 바인딩한다. 하지만 이벤트 바인딩이 발생한 시점에서 이미 생성된 요소만 바인딩된다. 즉, 나중에 추가된 요소에 대해.. 2023. 5. 12. [jQuery] 선택자, 메소드 정리 - 선택자 (Selector) selectors (선택자) * 전부 선택 # ID . class E element E1, E2 여러개의 element 선택 속성(attribute) 선택자 [name] name 속성을 가진 [name="~~~~"] name 속성의 값이 ~~~~인 [name!="~~~~"] name 속성의 값이 ~~~~가 아닌 [name^="~~~~"] name 속성의 값이 ~~~~로 시작하는 [name$="~~~~"] name 속성의 값이 ~~~~로 끝나는 [name*="~~~~"] name 속성의 값이 ~~~~를 포함하는 기본 필터 (filter) 선택자 :first / :last 선택된 요소 중 처음 / 마지막 요소 선택 :even / :odd 짝수번째 / 홀수번째 요소 선택 :eq(.. 2023. 5. 11. [JS] append(), appendChild() JavaScript에서 만든 것을 HTML에 넣는 방법 createElement() : 요소를 만드는 메서드 const hello = document.createElement( "h1" ) // 코드가 생성된다. (생성만 됨, 아직 사용할 수 있는 상태는 아님) append() : 선택한 요소 안에 자식요소를 추가 (1) append 메서드는 한번에 여러 개의 자식 요소 설정이 가능함 ( 노드 객체, 문자열 ) append 메서드는 반환 데이터가 없음 const parent = document.createElement('div'); const childA = document.createElement('h1'); const childB = document.createElement('span'); child.. 2023. 5. 8. 이전 1 다음