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

11646 단어 webdev
Event interface은 DOM에서 발생하는 이벤트를 나타냅니다.
targetcurrentTarget 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 요소만 클릭했지만 divform도 기록되었습니다. 이것은 event bubbling 이라는 것이 있기 때문입니다. 기본적으로 클릭과 같은 이벤트는 트리거된 위치에서 멈추지 않고 대신 부모, 부모의 부모 등으로 위쪽으로 버블링됩니다. 그렇기 때문에 위의 예에서도 divform에 연결된 핸들러가 호출되었습니다.
  • 이벤트 버블링은 이벤트 대상에 영향을 주지 않습니다. pevent.target라고 말한 세 개의 로그 메시지에 유의하십시오.

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



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




    event.currentTarget 예제



    이제 로그 메서드에서 event.targetevent.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 로 규정되지 않습니다.
  • 좋은 웹페이지 즐겨찾기