[노트내용정리] DOM과 이벤트

📌 DOM(Document Object Model) API

• DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할
• 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.
• DOM을 변수에 담을 때는 $를 사용하거나 변수 뒤에 El을 붙여주는 등 엘리먼트를 구분시켜주는 것을 추천함
  (변수네이밍이 충돌 할 일이 없다!)

💡 API는 Application Programming Interface. 쉽게 ‘주문서’라고 기억하기!

 

 

1. DOM 트리에 접근

document 객체를 통해 HTML 문서에 접근 (셀렉터로 엘리먼트를 가져오는 거,,,)

// ⭐해당하는 Id를 가진 요소에 접근하기
document.getElementById();

// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();

// ⭐css 선택자로 단일 요소에 접근하기
document.querySelector("selector");

// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");

 

2. 이벤트 삽입

• target.addEventListener( type, listener ) 형태의 문법을 사용
•  type에는 click, mouseOver, wheel 등이 있다.
•  addEventListener는 이벤트를 정의

 

3. 클래스 제어

classList 객체를 사용 해 요소의 class 속성을 제어

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){
    // myBtn.classList.add("blue");
    // blue 라는 클래스의 속성 값을 지정

    // myBtn.classList.remove("blue");  
    // 클래스를 제거
    
    // myBtn.classList.toggle("blue");
    // 클래스 토글. 없으면 넣어주고, 있으면 제거
    
    // console.log(myBtn.classList.contains("blue"));
    // 해당하는 클래스가 있는지 확인
})

 

4. 요소 제어

요소를 새롭게 생성하고, 위치하고, 제거

• document.createElement(target) : target 요소를 생성
• document.createTextNode(target) : target 텍스트를 생성
• element.appendChild(target) : target 요소를 element의 자식으로 위치
• element.removeChild(target) : element의 target 자식 요소를 제거
• element.append(target) : target 요소를 element의 자식으로 위치. appendChild 와 다른점은 노드 뿐만 아니라 여러개의 노드를 한번에, 그리고 텍스트도 자식 노드로 포함시킬 수 있다.
• terget.remove(): target 요소 제거

 

 

 

📌 이벤트

• 이벤트란? 어떤사건을 의미
• 특정 상황, 동작이 발생했을 때 실행되는 동작이나 명령
• e.g. 현관문 열기  ⇒ 이벤트
• 비밀번호 입력, 잠금장치 해제, 문 열림 ⇒ 이벤트 발생 시 실행되는 동작 (이벤트 핸들러 or 이벤트 리스너)
• 모든 이벤트 핸들러는 이벤트 객체를 매개변수로 전달받는다
• 이벤트마다 이벤트 객체가 다르다

target.addEventlistener(type, listener)

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){
	console.log("hello world");
})

 

1. 이벤트 전파

• 캡쳐링: 브라우저 화면에서 이벤트가 발생하면 최상위인 window객체 → document → body 순으로 DOM트리 구조대로
  이벤트 대상을 찾는다. 이벤트가 나의 하위요소로 전파되는 것.
• 버블링: 캡쳐링의 반대. DOM트리를 따라 위로 올라가며 이벤트 대상을 찾는다. 이벤트가 나의 상위요소로 전파되는 것.

 

• 이벤트 전파를 활용해야하는 사례 ⇒ 이벤트 위임(event delegation)

이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 상위요소에 이벤트 핸들러를 할당하고 여러 요소를 한꺼번에 다룰 수 있다.
이벤트 낭비를 막아주기 때문에 그 영역을 조금만 벗어나면 동작하지 않는 상황을 막아준다.

💡 유튜브 플레이어: 개발자 도구의 이벤트리스너 창을 보면 알 수 있다.
(플레이어 레인지버튼에 이벤트를 주지 않고 상위요소에 이벤트를 줘서 화면을 클릭해도 재생/멈춤이 가능하도록 처리함..!)

https://ko.javascript.info/event-delegation

 

 

2. 이벤트 current target, terget, closest

• currentTarget: 이벤트 핸들러가 걸린 엘리먼트 
•  target: 실제 이벤트가 발생하는 엘리먼트
• closest: 가장 가까운 엘리먼트 가져오기

e.target.closest('button') // 실제 이벤트가 발생한 곳에서 가장 가까운 버튼을 가져와라

 

3. preventDefault()

브라우저에서 제공하는 기본동작 차단

<form action="">
    <button type="submit" class="submit">제출</button>
</form>
<script>
    const submit = document.querySelector('.submit');
    submit.addEventListener('click', (event) => {
        console.log('clicked');
        event.preventDefault();    
    })
</script>

 

4. stopPropagation()

이벤트 전파 차단. 이벤트의 기본 동작은 실행되므로, 링크나 버튼의 클릭을 막는 것은 아니다.

이런 기본 동작 차단은 3번의 preventDefault에서..!

 

// event.preventDefault();

document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    document.getElementById("output-box").innerHTML +=
      "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
    event.preventDefault();
  },
  false,
);