이벤트 버블링 & 캡쳐링
이벤트 버블링
어떤 이벤트가 발생되었을 때 해당 이벤트가 발생된 요소의 부모 요소를 통하여 최상위 요소까지 이벤트가 전달되는 현상을 말한다.
여기에서 child요소를 선택하였을 때 child => parent => grandparent 의 순서대로 이벤트가 발생하는 것을 볼 수 있다.
이벤트 캡쳐링
위와 완전히 반대로 가장 상위 요소로부터 이벤트 객체를 찾아가는 현상을 말한다.
다음 현상을 확인하기 위해서는 addEventListener 안에 capture: true를 넣으면 된다. (default는 false이다.)
이벤트 위임
이벤트 버블링과 이벤트 캡쳐링이란 특성을 적절히 사용하면 여러개의 요소가 있을 때 각각의 요소에 이벤트를 일일히 지정할 필요 없이 부모 요소에 이벤트를 하나만 주어 코드의 재사용성을 높이고 메모리를 절약할 수 있다.
event 객체
event.target 이벤트 발생 위치
이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환
클릭된 요소를 기준으로 사용하는 경우
event.currentTarget 이벤트 생성 위치
이벤트가 바인딩된 요소, 해당하는 요소를 반환
<div onclick="checkTarget();">
<span>test</span>
</div>
function checkTarget(event) {
var ele = event.currentTarget;
console.log(ele);
}만약 사용자가 div 내부의 span 태그를 클릭한 경우
event.target // 클릭된 span 태그를 반환
event.currentTarget // 이벤트가 바인딩된 div 요소를 반환
위 예제는 간단한 1 depth의 하위 구조를 가졌지만 복잡해지는 경우 event.target 만으로는 어떤 요소가 클릭되어 반환되어야하는지 그 결과가 달라질 수 있습니다.
이런 경우 event.currentTarget을 활용하는 것이 더욱 편리하다.
Element.tagName
읽기 전용 속성은 요소에 호출 된 요소의 태그 이름을 반환한다.
ev.target.tagName === "DIV"HTML 문서를 나타내는 DOM 트리의 경우 반환 된 태그 이름은 항상 표준 대문자 형식
DOM 제어 메서드
appendChild() - DOM 메서드
선택한 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가
DOM 메서드로 엘리먼트(노드) 객체만 사용 가능
노드 1개만 추가
remove() - DOM 메서드
현재 엘리먼트 삭제
삭제할 엘리먼트의 참조만 있으면 됨
인터넷 익스플로러 미지원
removeChild() - DOM 메서드
현재 엘리먼트의 자식 엘리먼트 1개를 삭제
부모 엘리먼트와 삭제할 엘리먼트 2개의 참조 필요
replaceChild()
현재 엘리먼트르 다른 엘리먼트로 대체
insertBefore() - DOM 메서드
부모노드.insertBefore(추가할새노드, 기준참조노드);
기준 참조 노드 앞에 새노드를 추가
insertAfter() 는 ❌
hasChildNodes() - DOM 메서드
자식 노드가 있으면 true, 없으면 false 반환
cloneNode() - DOM 메서드
현재 노드를 복사해 반환
파라메터로 true/false 를 인자로 보낼 수 있다
true 면 노드가 담고 있는 텍스트 등 내용까지 복사
false 면 노드 외형만 복사
previousSibling / nextSibling - DOM 속성
이전 이웃 노드 반환 / 다음 이웃 노드 반환
반환할 이웃 노드가 없으면 null 반환
insertAdjacentElement() - DOM 메서드
대상 엘리먼트의 태그 안과 밖 위치에 엘리먼트를 추가
대상엘리먼트.insertAdjacentElement(위치, 추가할요소);
위치값은 beforebegin, afterbegin, beforeend, afterend 4개를 지원
대상 엘리먼트 바깥앞(beforebegin), 바깥뒤(afterend), 안쪽내용앞(afterbegin), 안쪽내용뒤(beforeend) 에 엘리먼트를 추가
엘리먼트 노드에만 사용할 수 있으며, 태그쌍을 기준으로 시작태그와 끝나는 태그의 앞뒤에 삽입하는 방식
엘리먼트 추가에 성공하면 추가된 엘리먼트가 반환되며, 실패하면 null을 반환
firstChild / lastChild - DOM 속성
첫번째 자식 노드를 반환 / 마지막 자식 노드를 반환
firstElementChild / lastElementChild - DOM 속성
첫번째 자식 엘리먼트를 반환 / 마지막 자식 엘리먼트를 반환
children - DOM 속성
현재 노드의 모든 자식 엘리먼트 노드 컬렉션을 반환
배열 순환하는 방식으로 반환된 컬렉션을 순환할 수 있음
엘리먼트 노드만 반환
createElement() / createTextNode() - DOM 메서드
createElement(): 엘리먼트를 생성. 파라메터에는 태그 이름만 사용 가능. 생성된 엘리먼트 노드 객체를 반환.
createTextNode(): 텍스트 노드를 생성해 텍스트 노드를 반환
before() / after() - 자바스크립트 메서드
선택한 노드의 앞에 추가 / 선택한 노드의 뒤에 추가
문자열, 엘리먼트(노드) 객체 모두 추가 요소로 사용 가능하며, 문자열을 인자로 넣을 경우 텍스트 노드가 추가
나머지 파라메터로 여러 개의 노드와 문자열을 추가하는 것이 가능
인터넷 익스플로러 미지원.
createTextNode(), createElement() 이용한 노드 생성 및 추가 과정을 before()/after() 1개의 메서드로 줄여서 사용할 수 있기 때문에 코드 최적화 및 가독성 향상에 유리
가급적 before(), after() 메서드를 사용해 DOM 을 제어하는 것 추천
prepend() / append() - 자바스크립트 메서드
prepend(): 현재 엘리먼트의 첫번째 자식 엘리먼트 앞에 추가
append(): 현재 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가
문자열, 엘리먼트(노드) 객체 모두 추가 요소로 사용 가능하며, 문자열을 인자로 넣을 경우 텍스트 노드가 추가됨.
나머지 파라메터로 여러 개의 노드와 문자열을 추가하는 것이 가능.
인터넷 익스플로러 미지원.
createTextNode(), createElement() 이용한 노드 생성 및 추가 과정을 prepend()/append() 1개의 메서드로 줄여서 사용할 수 있기 때문에 코드 최적화 및 가독성 향상에 유리
가급적 prepend(), append() 메서드를 사용해 DOM 을 제어하는 것 추천
예제
