Давайте прямо к этому…
event.target
— это свойство события DOM в JavaScript. Он относится к фактическому элементу DOM, вызвавшему событие.
Например, если у вас есть прослушиватель событий, прикрепленный к родительскому элементу, скажем, div
, который прослушивает клики, event.target
вернет конкретный дочерний элемент, на который был нажат.
Вот еще один пример, иллюстрирующий это:
<div id="parent"> <p id="child1">Child 1</p> <p id="child2">Child 2</p> </div> <script> const parent = document.getElementById("parent"); parent.addEventListener("click", (event) => { console.log(event.target); }); </script>
В приведенном выше примере, если вы щелкнете по первому дочернему элементу, #child1
, консоль выведет <p id="child1">Child 1</p>
. Если бы вы щелкнули второй дочерний элемент, #child2
, консоль вывела бы <p id="child2">Child 2</p>
Важно отметить, что event.target
всегда относится к фактическому элементу, вызвавшему событие, даже если прослушиватель событий привязан к другому элементу. В приведенном выше примере, даже несмотря на то, что прослушиватель событий привязан к родительскому элементу, event.target
по-прежнему правильно идентифицирует дочерний элемент, по которому был сделан щелчок.
Следующий раунд…
event.currentTarget
— это свойство события DOM в JavaScript, которое ссылается на элемент, которому в данный момент отправляется событие. Он представляет собой элемент, к которому прикреплен прослушиватель событий, и обычно используется в сценариях всплытия или захвата событий, где событие может быть распространено от дочернего элемента к его родительскому.
Вот пример:
<div id="parent"> <p id="child">Click me!</p> </div> <script> const parent = document.getElementById("parent"); const child = document.getElementById("child"); parent.addEventListener("click", (event) => { console.log("currentTarget:", event.currentTarget); console.log("target:", event.target); }); child.addEventListener("click", (event) => { console.log("currentTarget:", event.currentTarget); console.log("target:", event.target); }); </script>
Если вы нажмете на элемент child
, вывод будет таким:
currentTarget: [object HTMLParagraphElement] target: [object HTMLParagraphElement] currentTarget: [object HTMLDivElement] target: [object HTMLParagraphElement]
Вы можете заметить, что event.currentTarget
возвращает элемент, к которому присоединен прослушиватель событий (child
или parent
), а event.target
возвращает фактический элемент, на который был нажат щелчок (child
). Это позволяет по-разному обрабатывать события в зависимости от источника события.
Попробуйте это визуальное объяснение…
Представьте, что в 8 лет у вас есть ящик для игрушек, и вы хотите знать, когда кто-то играет с игрушками внутри него. Ящик для игрушек похож на
event.currentTarget
— это то, на что вы обращаете внимание.
Игрушка, с которой человек играет внутри коробки, похожа наevent.target
. Это конкретная вещь, которая вызывает событие (в данном случае кто-то играет с игрушкой).
Итак,
event.currentTarget
похож на ящик для игрушек, аevent.target
похож на игрушку, с которой играет человек. Таким образом, вы можете знать не только, что кто-то играет с игрушками, но и с какой конкретной игрушкой они играют!
Спасибо, что прочитали, адиос…