[JS] 이벤트 버블링 / 이벤트 위임

window 브라우저 전체를 담고 있는 객체
document는 웹 페이지 전체를 의미

요소를 가져오는 방법 중 가장 대표적으로 쓰이는 것
document.querySelector()의 첫 번째 인자 안에는 css 선택자들을 넣어줌

이벤트를 감지하려면 리스너를 달아줌
addEventListener('click', () => {})
첫 번째 인자는 어떤 이벤트가 발생했는지를 문자열로
두 번째 인자는 콜백 함수

요소 생성
document.createElement("button")
첫 번째 인자는 생성하고자 하는 태그의 이름을 문자열로

span.innerText = "X";
li.appendChild(span)

button.addEventListner()도 가능
button.onclick = () => {}

li.remove()

css에서 클래스 두개 선택
.king__list.angry

여러 개의 클래스에 자바스크립트도 접근 할 수 있는 방법
kingList.classList

kingList.addEventListener('mouseover', () => {
kingList.classList.add("angry");
});

mouserleave이벤트
kingList.classList.remove("angry");

box.className

자바스크립트에서는 이벤트가 발생하면 상위 요소로 자동으로 전파
최상 요소까지 전파
이러한 것을 이벤트 버블링이라고 함

초록색을 눌렀음에도 불구하고 파랑, 빨강까지 클래스 이름이 출력

전파가 되지 않도록 막아주기
e.stopPropagation();

이벤트 위임
뭘 누르든 상위요소로 전파가 되니 각 요소에 리스너를 달지 말고
모든 요소에 리스너를 다는 게 아니라 상위요소에 리스너를 달고 이벤트가 하위 요소에서 전파되어서 전달이 되니 하위요소가 무엇인지를 판단을 하고 조건부로 처리를 함

red.addEventListener("click", (e) => {
console.log(e.target);
console.log(e.currentTarget);
});
이벤트 객체에는 target과 currentTarget 두 가지가 있음
target은 이벤트를 발생시킨 애 자체, 내가 누른 애
currentTarget은 이벤트를 감지하는 리스너가 누구에게 달려있는지. 즉 이벤트 리스너가 부착되어 있는 요소

e.target.className

제출은 되는데 새로고침은 안됐으면 좋겠을 때
form.addEventListener('submit', (e) => {
e.preventDefault();
});
e.cancelable이 true인 값만 preventDefault가 가능

e.target으로부터 가장 가까운 첫 번째 인자로 들어온 선택자에 해당하는 애
e.target.closest(".answer__list > li")

e.target이 HTMLLIElement에 속하는지
e.target instanceof HTMLLIElement