addEventListener, event, parentNode, classList

*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

addEventListener:

event를 binding한다. binding이란 event에 대한 반응을 어떻게 할 지 정의하는 과정이다.

*event는 마우스 클릭, 키보드 입력, 창 조절 같은 사용자가 행하는 특정 행위라고 할 수 있다. 자세한 event 목록은 MDN의 event reference를 보면 확인할 수 있다.

// 예시 코드

const title = document.querySelector("h1");

title.addEventListener("click", handleClick);
// click: event
// handleClick: listener

parameter로는 event와 listener가 입력된다.

title에 대해 "click" event가 발생했을 경우 handleClick이라는 listener를 호출한다는 뜻이다.

click event가 발생할 때마다 호출되는 식이기 때문에 handleClick뒤에 '()'를 붙이지 않는다. 만약 붙이면 저 시점에서 호출된다.

 

event.preventDefault, event.target, parentNode

const container = document.querySelctor("body");
const form = container.querySelector("form");
const input = form.querySelector("input");

function handleSubmit(event) {
	event.preventDefault();
    // 1번
    
    const _form = event.target;
    // 2번
    
    const _container = _form.parentNode;
    // 3번
    
}

form.addEventListener("submit", handleSubmit);

다음  코드는 submit event가 발생하고 그것을 handler를 통해 binding하는 과정이다.

여기서 event는 event 객체인데 event에 대한 속성, method 형식으로 제공해준다.

handleSubmit이 수행되면 제일 먼저 event.preventDefault()가 호출된다.

event 객체의 preventDefault란 특정 event에 대한 기본 동작을 취소하는 method이다.

예를 들어 submit의 경우 기본 동작으로 다른 페이지로 넘어가게 되어있는데 preventDefault를  통해 동작 안하게 설정하는 것이다.

 

다음은 event.target이다. 위에서 event 객체는  event에 대한 속성을 제공한다고 했는데 target도 그중 하나이다.

여기서는 form을 통해 event가 발생한 것이므로 event.target은 form이다.

 

parentNode는 DOMTree에서 특정 DOM의 상위 DOM을 반환해준다. 즉 _form.parentNode의 경우 form이 container에 속해있으므로 container인 것이다.

 

---

classList:

// 예시 코드
const title = document.querySelector("h1");

title.classList.add("class_name");

title.classList.remove("class_name");

title.classList.toggle("class_name");

classList는 'Element.classList' 이런식으로 사용된다.

여기서 Element는 간단하게 HTML의 tag들이라고 생각하고 넘어가려한다.

classList는 class 값을 다루는 값의 집합이라고 생각하자.

대표적으로 add, remove, toggle method가 있다.

add, remove는 말그대로 parameter로 받은 class를 추가, 제거하는 method이다.

toggle 같은 경우는 add, remove의 역할을 동시에 한다고 생각할 수도 있는데 예를들면 title안에 'class_name'이란 class가 존재할 시 remove하고 존재하지 않을시 add하는 형식이다.

 

참고 사이트:

developer.mozilla.org/en-US/docs/Web/Events

Event reference

developer.mozilla.org/en-US/docs/Web/API/Element/classList

Element.classList

developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener()

developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

Node.parentNode