event.Target 및 event.currentTarget에 대한 심층 가이드
11646 단어 webdev
target
및 currentTarget
read-ony 속성이 있지만 둘 사이의 차이점이 무엇인지 혼란스러울 수 있으므로 이 게시물에서는 둘 다 자세히 살펴보겠습니다.목차
What targets & currentTargets Are
대상 및 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
에 대한 핸들러가 호출되지 않는 것을 볼 수 있습니다.결론
이 가이드에서 우리는 다음과 같이 배웠습니다.
event.target
은 이벤트를 트리거한 요소이며 이벤트 트리거에는 단 하나target
가 있습니다. event.currentTarget
는 이벤트가 버블링을 통해 도달할 수 있는 DOM 트리에서 이벤트에 대한 핸들러가 연결되는 요소(이벤트를 트리거한 요소일 필요는 없음)입니다. 요소에 핸들러가 있지만 이벤트가 다른 경우 요소는 event.currentTarget
로 규정되지 않습니다. Reference
이 문제에 관하여(event.Target 및 event.currentTarget에 대한 심층 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jessewei/an-in-depth-guide-on-eventtarget-and-eventcurrenttarget-53gp텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)