이것은 이전에 100번 이상 작성되었으며 아마도 StackOverflow에 100개 이상의 답변이 있을 것입니다. 하지만 시간이 지남에 따라 다른 기사와 답변을 거치며 중요한 부분을 선별하여 이 게시물로 작성했습니다.

이벤트 처리

JavaScript에서 이벤트에 핸들러를 연결하는 방법에는 3가지가 있습니다.

HTML 속성

DOM 속성

addEventListener()

HTML 속성

이것은 DOM 요소에 속성을 추가하여 이벤트에 핸들러를 연결하는 구식 방식입니다.

노드는 하나의 onclick 속성만 가질 수 있음을 기억하십시오. 따라서 이 접근 방식을 사용하면 하나의 핸들러만 이벤트에 등록할 수 있습니다.

<div id="el" onclick="kaboom()"></div>

DOM 속성

이것은 DOM 노드를 즉석에서 생성하고 속성을 추가하고 속성에 핸들러를 연결하는 JavaScript 방식입니다. 이는 앞의 접근 방식과 거의 동일하므로 이벤트에 하나의 핸들러만 등록할 수 있습니다.

<script>
  el = document.querySelector("#el")
  el.onclick = clickMe();
</script>

addEventListener() 🔥

이것은 핸들러를 이벤트에 바인딩하는 현대적인 방법입니다. 이벤트에 여러 핸들러를 바인딩할 수 있으며 해당 이벤트가 발생할 때 이러한 모든 핸들러가 호출됩니다.

<script>
  el.addEventListener("click", (e) => {
    // Some code here that goes KABOOM!
  });
</script>

이벤트 동작

preventDefault()

이벤트 버블링

이벤트 캡처

방지기본값()

연관된 기본 작업이 있는 소수 또는 미리 정의된 이벤트가 있습니다. 예를 들어,

기본적으로 링크는 링크의 대상으로 이동합니다.

아래쪽 화살표를 누르면 페이지가 아래로 스크롤됩니다.

이러한 경우 이러한 요소와 연결된 사용자 지정 핸들러는 기본 작업 다음에 기본 작업이 따라오기 전에 호출됩니다. 요소에서 이 기본 동작을 완전히 바인딩 해제하려면 핸들러에서 event.preventDefault()를 호출할 수 있습니다.

참고: 이것은 이벤트가 DOM을 버블링하는 것을 막을 수 없습니다.

이벤트 버블링 및 이벤트 캡처

DOM의 이벤트는 일반적으로 웹 브라우저에 중첩된 이벤트 스택으로 전파됩니다.

이벤트 버블링

이벤트 버블링은 예를 들어 더 잘 설명할 수 있습니다.

다음과 같이 중첩된 DOM 구조를 취합시다.

<div id="parent">
  <div id="child"></div>
</div>

#parent 및 #child div 모두에 연결된 핸들러가 있는 경우

자식을 클릭하면 이벤트의 버블링 특성으로 인해 먼저 #child div에 대한 처리기가 호출된 다음 이벤트가 #parent div로 전파되고 해당 처리기가 호출됩니다.

간단히 말해서 이벤트가 아래에서 위로 버블링될 때 자식이 먼저이고 부모가 다음입니다.

이벤트 캡처

이벤트 캡처는 DOM에서 이벤트를 캡처하고 실행을 위해 이벤트 핸들러에 전달하는 것 이상입니다. 이벤트는 하향식에서 캡처됩니다. 즉, 가장 바깥쪽 요소가 먼저 캡처되고 내부 요소로 전파됩니다. 이벤트가 캡처되면 가장 안쪽에 있는 요소에서 이벤트 버블링이 시작됩니다.

stopPropagation()

자식 이벤트 핸들러에서 event.stopPropagation()를 호출하여 자식에서 부모로 이벤트 버블링을 중지할 수 있습니다.

function childHandler(event) {
  event.stopPropagation();
}

이벤트 리스너 제거

이벤트 이름과 핸들러 이름을 인수로 받아들이는 이벤트를 호출하여removeEventListener() 요소에서 이벤트 리스너를 제거할 수 있습니다.

function handleClick(e) {
  // go KABOOM!
}

element.addEventListener("click", handleClick);
element.removeEventListener("click", handleClick);

참고: 익명 처리기 메서드를 사용하지 마십시오. 콜백 외부에서 함수를 정의한 다음 removeEventListener 콜백에서 다시 참조해야 합니다.

// this is wrong as you cannot remove this event listener
element.addEventListener("click", () => { /* go KABOOM! */ });

그게 다야. 이 게시물이 어떤 식으로든 개선될 수 있다고 생각되면 댓글을 남겨주세요.