javascript에서 currentTarget 속성과 대상 속성의 정확한 차이점은 무엇입니까

javascript에서 currentTarget 속성과 대상 속성의 정확한 차이점은 무엇입니까

---

누구나 Javascript 이벤트에서 속성 currentTarget과 target속성 의 정확한 차이점 을 예를 들어 어떤 시나리오에서 어떤 속성이 사용되는지 알려주십시오 .

---

기본적으로 이벤트는 기본적으로 버블 링 되므로 두 가지의 차이점은 다음과 같습니다.

• target 이벤트를 트리거 한 요소입니다 (예 : 사용자가 클릭 한 경우)
• currentTarget 이벤트 리스너가 첨부 된 요소입니다.

이 블로그 게시물 에 대한 간단한 설명을 참조하십시오 .

---

target = 이벤트를 트리거 한 요소

currentTarget = 이벤트를 수신하는 요소

---

최소 실행 가능 예

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}

<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

당신이 클릭하면 :

2 click me as well

그런 다음 1청취하고 결과에 추가합니다.

target: 2
currentTarget: 1

이 경우 :

• 2 이벤트를 시작한 요소입니다.
• 1 이벤트를 청취 한 요소입니다.

당신이 클릭하면 :

1 click me

대신 결과는 다음과 같습니다.

target: 1
currentTarget: 1

Chromium 71에서 테스트되었습니다.

---

이것이 고착되지 않으면 다음을 시도하십시오.

현재 는 현재 를 currentTarget나타냅니다. 다른 곳에서 일어난 사건을 포착 한 가장 최근의 목표입니다.

---

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

위 코드에서 P 태그를 클릭하면 세 개의 경고가 표시되고 div 태그를 클릭하면 양식 태그를 클릭하면 두 개의 경고와 단일 경고가 표시됩니다. 이제 다음 코드를 참조하십시오.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>

우리는 방금 P와 양식 태그에서 onclick을 제거했으며 이제 P 태그를 클릭하면 경고가 하나만 나타납니다.

[object HTMLParagraphElement] [객체 HTMLDivElement]

여기서 event.target은 [object HTMLParagraphElement]이고 event.curentTarget은 [object HTMLDivElement]입니다.

event.target is the node from which the event originated, and event.currentTarget, on the opposite, refers to the node on which current-event listener was attached.To know more see bubbling

Here we clicked on P tag but we don't have listener on P but on its parent element div.

---

event.target is the node from which the event originated, ie. wherever you place your event listener (on paragraph or span), event.target refers to node (where user clicked).

event.currentTarget, on the opposite, refers to the node on which current-event listener was attached. Ie. if we attached our event listener on paragraph node, then event.currentTarget refers to paragraph while event.target still refers to span. Note: that if we also have an event listener on body, then for this event-listener, event.currentTarget refers to body (ie. event provided as input to event-listerners is updated each time event is bubbling one node up).

참고URL : https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property