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

JAVASCRIPT / 글쓴이

누구나 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 태그를 클릭하면 경고가 하나만 나타납니다.

[개체 HTMLParagraphElement] [개체 HTMLDivElement]

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

event.target 이벤트가 시작된 노드 및 event.currentTarget는 반대측에 attached.To 더 알 된 현재 이벤트 리스너의 노드로 지칭 버블 볼

여기서는 P 태그를 클릭했지만 P에는 리스너가 없지만 부모 요소 div에는 리스너가 있습니다.

답변

event.target 은 이벤트가 시작된 노드입니다 (예 : 이벤트 리스너 (문단 또는 범위)를 배치 할 때마다 event.target은 노드 (사용자가 클릭 한 위치)를 나타냅니다.

반대의 event.currentTarget 은 현재 이벤트 리스너가 연결된 노드를 나타냅니다. 즉. 이벤트 리스너를 단락 노드에 연결 한 경우 event.currentTarget은 단락을 참조하고 event.target은 여전히 ​​span을 나타냅니다. 참고 : body에 이벤트 리스너가있는 경우이 이벤트 리스너의 경우 event.currentTarget은 body를 참조합니다 (즉, 이벤트가 노드 하나를 버블 링 할 때마다 이벤트 리스너에 입력으로 제공된 이벤트가 업데이트 됨).

답변