답변:
기본적으로 이벤트는 기본적으로 버블 링 되므로 두 가지의 차이점은 다음과 같습니다.
target 이벤트를 트리거 한 요소입니다 (예 : 사용자가 클릭 한 경우) currentTarget 이벤트 리스너가 첨부 된 요소입니다.이 블로그 게시물 에 대한 간단한 설명을 참조하십시오 .
XMLHttpRequest
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: 1Chromium 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>[개체 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를 참조합니다 (즉, 이벤트가 노드 하나를 버블 링 할 때마다 이벤트 리스너에 입력으로 제공된 이벤트가 업데이트 됨).