event.Target 및 event.currentTarget에 대한 심층 가이드

Event interface은 DOM에서 발생하는 이벤트를 나타냅니다.
target 및 currentTarget read-ony 속성이 있지만 둘 사이의 차이점이 무엇인지 혼란스러울 수 있으므로 이 게시물에서는 둘 다 자세히 살펴보겠습니다.

목차

Table of Contents

What targets & currentTargets Are

event.target

event.currentTarget

An event.target Example

An event.currentTarget Example

대상 및 currentTarget은 무엇입니까?

이벤트.대상

이벤트를 트리거한 요소를 나타냅니다.

event.currentTarget

이벤트 핸들러가 연결된 요소를 참조합니다(반드시 이벤트를 트리거한 요소는 아님).

요소의 핸들러가 다른 이벤트를 처리하는 것처럼 currentTarget 에 적합하지 않기 때문에 여기에서 이벤트에 대한 핸들러가 중요합니다.

event.target 예

예제는 추상적인 개념을 이해하는 가장 쉬운 방법입니다. 다음은 게시물 전체에서 사용할 간단한 html 스니펫입니다.

<body>
  <form>FORM
    <div>DIV
      <p>P</p>
    </div>
  </form>
  <script>
    const form = document.querySelector("form")
    const div = document.querySelector("div")
    const p = document.querySelector("p")

    form.onclick = function(event) {
      // do something
    }
    div.onclick = function(event) {
      // do something
    }
    p.onclick = function(event) {
      // do something
    }
  </script>
</body>

다음과 같습니다(단순화를 위해 CSS 코드를 생략했습니다).



이제 각 핸들러에 target를 기록하여 이벤트가 발생할 때 어떤 일이 발생하는지 확인합니다.

form.onclick = function(event) {
  console.log("form: ", event.target)
}
div.onclick = function(event) {
  console.log("div: ", event.target)
}
p.onclick = function(event) {
  console.log("p: ", event.target)
}

p 요소를 클릭하면 다음이 기록됩니다.



여기에 몇 가지 중요한 사항이 있습니다.

p 요소만 클릭했지만 div 및 form도 기록되었습니다. 이것은 event bubbling 이라는 것이 있기 때문입니다. 기본적으로 클릭과 같은 이벤트는 트리거된 위치에서 멈추지 않고 대신 부모, 부모의 부모 등으로 위쪽으로 버블링됩니다. 그렇기 때문에 위의 예에서도 div 및 form에 연결된 핸들러가 호출되었습니다.

이벤트 버블링은 이벤트 대상에 영향을 주지 않습니다. p가 event.target라고 말한 세 개의 로그 메시지에 유의하십시오.

이제 div 요소를 클릭해 보겠습니다. 그러면 로그 메시지가 표시될 것입니다.



그리고 form 요소를 클릭한 로그도 예상대로입니다.

event.currentTarget 예제

이제 로그 메서드에서 event.target를 event.currentTarget로 변경해 보겠습니다.

form.onclick = function(event) {
  console.log("form: ", event.currentTarget)
}
div.onclick = function(event) {
  console.log("div: ", event.currentTarget)
}
p.onclick = function(event) {
  console.log("p: ", event.currentTarget)
}

이제 p를 클릭하면 다음 결과가 생성됩니다.


div를 클릭하면 이를 기록합니다.


form를 클릭하면 다음이 생성됩니다.



이벤트를 트리거한 요소부터 부모, 부모의 부모 등에 이르기까지 모든 요소는 이벤트를 처리할 수 있는 핸들러가 있는 경우 event.currentTarget로 분류됩니다.

이 예에서 세 요소 각각에는 클릭 이벤트에 대한 핸들러가 있으므로 이벤트가 요소에서 실행되고 위쪽으로 버블링되면 하나 이상의 모든 요소가 자체 핸들러를 호출하고 자체를 event.currentTarget 로 기록합니다.

여기에서 다른 이벤트에 대한 핸들러는 요소를 지정된 이벤트에 대한 event.currentTarget로 규정하지 않기 때문에 클릭 이벤트에 대한 핸들러가 특히 중요합니다. 예를 들어 p 에 대한 이벤트 핸들러를 삭제하도록 클릭 이벤트 핸들러를 변경해 보겠습니다.

...
p.ondrop = function(event) {
  console.log("p: ", event.currentTarget)
}

이제 p를 다시 클릭하면 핸들러가 드롭 이벤트만 처리하고 클릭 이벤트는 처리하지 않기 때문에 p에 대한 핸들러가 호출되지 않는 것을 볼 수 있습니다.

결론

이 가이드에서 우리는 다음과 같이 배웠습니다.

Anevent.target은 이벤트를 트리거한 요소이며 이벤트 트리거에는 단 하나target가 있습니다.

event.currentTarget는 이벤트가 버블링을 통해 도달할 수 있는 DOM 트리에서 이벤트에 대한 핸들러가 연결되는 요소(이벤트를 트리거한 요소일 필요는 없음)입니다. 요소에 핸들러가 있지만 이벤트가 다른 경우 요소는 event.currentTarget 로 규정되지 않습니다.